HTML required属性在iOS设备上失效问题及自定义表单求助

我之前做表单开发时也踩过iOS Safari里required属性不生效的坑，结合你的代码，给你几个实际可行的解决思路：

• 确保表单提交时触发原生验证
  如果你的表单是通过JavaScript手动调用form.submit()提交的（比如绑定了按钮的点击事件），iOS Safari不会自动触发required的验证逻辑。这时候需要手动调用表单的checkValidity()和reportValidity()方法来触发验证：

  // 假设你有一个提交按钮，id为submit-btn
  document.getElementById('submit-btn').addEventListener('click', function(e) {
    const form = document.getElementById('i-recaptcha');
    // 检查表单有效性
    if (!form.checkValidity()) {
      e.preventDefault(); // 阻止默认提交
      form.reportValidity(); // 弹出原生的验证提示框
    }
  });
  

• 修正input的type属性
  你的邮箱输入框用的是type="text"，改成type="email"不仅能让iOS调出专门的邮箱键盘，还能让required验证更符合预期（iOS Safari对标准type的表单元素支持更好）：

  <input class="email_popup" id="email" maxlength="80" name="email" size="20" type="email" placeholder="Your Email..." required>
  

  另外required属性可以简写为required，不需要写required="required"，两种写法都合法，但简写更简洁规范。

• 排查CSS对表单元素的影响
  如果你的input元素被自定义CSS设置为不可见（比如opacity: 0、display: none）或者无法聚焦，iOS Safari可能会跳过它的required验证。确保所有必填字段都是可见、可交互的，没有被CSS隐藏或禁用。

• 旧iOS版本的兼容兜底
  对于iOS 10及以下的旧版本Safari，HTML5表单属性的支持不够完善，你可以添加一段JS兜底验证，手动检查必填字段：

  function validateRequiredFields(form) {
    const requiredInputs = form.querySelectorAll('[required]');
    let isFormValid = true;
    
    requiredInputs.forEach(input => {
      if (!input.value.trim()) {
        isFormValid = false;
        alert(`${input.placeholder} 是必填项，请填写。`);
        input.focus();
        return false;
      }
    });
    
    return isFormValid;
  }
  
  // 绑定提交事件
  document.getElementById('submit-btn').addEventListener('click', function(e) {
    const form = document.getElementById('i-recaptcha');
    if (!validateRequiredFields(form)) {
      e.preventDefault();
    }
  });
  

内容的提问来源于stack exchange，提问作者Gh0sT