HTML表单中required属性失效问题排查求助

你遇到的核心问题很明确：你的「Search」按钮用的是<a>标签，而不是表单原生的提交按钮。HTML5的required校验只有在通过表单的原生提交机制触发时才会生效，<a>标签本质就是个跳转链接，哪怕你加了type="submit"属性，对它来说也是无效的——它只会直接跳转到目标页面，完全不会理表单里的校验规则。

看你代码里的按钮：

<a href="buy-step-02.html" class="btn is-small" type="submit">Search</a>

这里的type="submit"是给<button>或<input>标签用的，<a>根本不认这个属性，自然不会触发表单校验。

方法1：改用原生提交按钮（推荐） #

把<a>标签换成<button>标签，同时把跳转目标放到表单的action属性里，这样点击按钮就会自动触发校验，通过后再跳转：

<form id="form" method="get" action="buy-step-02.html">
  <input type="text" name="dressPrice" id="price" class="control" onkeypress="return numberFilter(event)" dir="rtl" onpaste="return false" required />
  <input type="checkbox" id="cbox1" required />
  <label class="tac-label"> 
    I accept the <a href="terms-and-conditions.html" class="tac-link">terms and conditions.</a>
  </label>
  <button class="btn is-small" type="submit">Search</button>
</form>

这种方式完全利用浏览器原生的表单机制，不需要额外写JS，最稳妥。

方法2：保留<a>标签，手动触发校验 #

如果因为样式或其他原因必须用<a>标签，可以给它加个点击事件，手动校验表单，通过后再允许跳转：

<form id="form" method="" action="">
  <input type="text" name="dressPrice" id="price" class="control" onkeypress="return numberFilter(event)" dir="rtl" onpaste="return false" required />
  <input type="checkbox" id="cbox1" required />
  <label class="tac-label"> 
    I accept the <a href="terms-and-conditions.html" class="tac-link">terms and conditions.</a>
  </label>
  <a href="buy-step-02.html" class="btn is-small" onclick="return validateForm()">Search</a>
</form>
<script>
function validateForm() {
  const form = document.getElementById('form');
  if (form.checkValidity()) {
    // 校验通过，允许跳转
    return true;
  } else {
    // 触发浏览器默认的校验提示
    form.reportValidity();
    // 阻止跳转
    return false;
  }
}
</script>

你另一个页面的表单肯定用的是原生的提交按钮（比如<button type="submit">或<input type="submit">），所以能正常触发浏览器的required校验逻辑。

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