HTML表单中input标签的required属性为何不生效？

常见原因及对应方案 #

• 自定义JS拦截了原生校验：如果页面有自定义表单提交事件（比如addEventListener('submit', ...)），但直接调用e.preventDefault()却没先校验表单有效性，会导致原生提示不触发。解决：在提交逻辑里先判断表单是否有效：

const form = document.querySelector('form');
form.addEventListener('submit', function(e) {
  if (!form.checkValidity()) {
    e.preventDefault();
    form.reportValidity(); // 手动触发原生校验提示
  }
  // 后续提交逻辑
});

• 存在novalidate属性：如果form标签或input标签上设置了novalidate，会直接禁用原生校验。检查代码里有没有这个属性，有的话删掉即可。

• 浏览器版本过旧：required属性不支持IE9及以下版本，若用户使用这类老旧浏览器，原生校验不会生效。解决：升级浏览器，或引入第三方表单校验库做兼容。

• 表单结构不完整：部分浏览器在form标签缺失action属性时，可能出现校验异常。可以给form添加action="#"或实际提交地址，确保结构完整。

可直接测试的完整示例 #

<form action="#" method="post">
  <div class="form-item">
    <input class="form-item" type="text" id="first-name" name="first-name" placeholder="First Name" required>  
  </div>
  <div class="form-item">
    <input class="form-item" type="text" id="surname" name="surname" placeholder="Surname Name" required>
  </div>
  <div class="form-item">
    <input class="form-item" type="email" id="email" name="email" placeholder="Email Address" required>
  </div>
  <button type="submit">提交</button>
</form>

手动触发校验的方式 #

如果需要在特定场景下触发校验，可调用reportValidity()方法：

document.querySelector('button[type="submit"]').addEventListener('click', function() {
  const form = this.closest('form');
  form.reportValidity();
});

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