设置required属性的表单输入框点击对应按钮未触发必填校验问题咨询

问题成因 #

• 浏览器原生的required属性校验仅会在表单提交动作触发时自动执行，你的代码存在两个问题导致未触发校验：
  1. 输入框和按钮没有被包裹在<form>标签内，浏览器无法识别二者属于同一表单单元，不会关联触发校验逻辑
  2. 按钮的点击事件直接执行verify()后返回false，完全阻止了默认的表单提交行为，即使套了表单标签也不会触发原生校验流程，直接执行了自定义的验证逻辑

修复方案 #

方案1：使用原生表单提交逻辑触发校验（推荐） #

调整代码结构如下，完全复用浏览器原生校验提示逻辑，不需要额外写校验判断代码：

<!-- 新增form标签包裹控件 -->
<form id="verifyForm">
  <input required type="text" id="bNum" value="" name="bNum" size="6" maxlength="6" placeholder="Badge Number" onkeyup="this.value = this.value.toUpperCase();">
  <!-- 去掉按钮的onclick事件，默认type为submit会触发表单提交 -->
  <button type="submit">Verify</button>
</form>

<script>
// 监听表单的submit事件，而非按钮的click事件
document.getElementById('verifyForm').addEventListener('submit', function(e) {
  // 先阻止默认表单提交跳转行为，此时原生required校验已经执行完成，不通过的话不会走到这一步
  e.preventDefault();
  verify();
})

function verify () {
  var bno = document.getElementById("bNum").value;
  switch (bno) {
    case "AJC8":
      alert("You are a Verified member!")
      break;
    case "AJB0":
      alert("You are a Verified member!")
      break;
    default:
      alert("You are Not a Verified member!")
      break;
  }
}
</script>

方案2：手动触发表单校验 #

如果不想调整现有DOM结构，也可以手动调用校验API判断输入合法性：

<input required type="text" id="bNum" value="" name="bNum" size="6" maxlength="6" placeholder="Badge Number" onkeyup="this.value = this.value.toUpperCase();">
<button onclick="handleVerify();return false;">Verify</button>

<script>
function handleVerify() {
  const inputEl = document.getElementById('bNum');
  // 手动触发校验，校验不通过时显示原生提示，直接终止逻辑
  if (!inputEl.checkValidity()) {
    inputEl.reportValidity();
    return;
  }
  verify();
}

function verify () {
  var bno = document.getElementById("bNum").value;
  switch (bno) {
    case "AJC8":
      alert("You are a Verified member!")
      break;
    case "AJB0":
      alert("You are a Verified member!")
      break;
    default:
      alert("You are Not a Verified member!")
      break;
  }
}
</script>

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