Javascript调用setCustomValidity()无法将表单字段置为有效状态问题求助

根因分析 #

• 浏览器原生表单校验执行时机早于自定义的onsubmit回调，第一次点击提交时自定义错误还未设置，原生校验无感知，第二次提交时才会读取到前一次设置的错误消息，所以需要点击两次才触发提示
• 自定义错误设置后未主动触发表单有效性状态更新，导致修改为正确内容后，浏览器仍然展示旧的错误提示
• type="number"类型的输入框会自动裁剪前导零，若参考号存在前导零的场景，会导致实际获取的value长度不符合预期
• 缺少校验前重置自定义错误的步骤，容易残留历史错误状态

修复代码 #

修改后的HTML #

<form id="data_form">
   <table>
       <tr> 
          <td colspan="2" class="right_align"> 
              <label for="supplier_ref"> 供应商参考号： </label>
          </td>
          <td colspan="2">
              <!-- 建议改为text类型，避免前导零丢失，如果仅允许数字可以加pattern校验 -->
              <input id="supplier_ref" name="supplier_ref" type="text" required pattern="\d{9}" title="编号长度必须为9位">
          </td>
       </tr>
       <!-- 更多行 -->
       <button id="generate" name="generate" type="submit"> 生成条形码 </button>
   </table>
</form>

修改后的Javascript #

const form = document.getElementById("data_form");
const emptymsg = "该字段为必填项";

// 监听submit事件，代替内联onsubmit
form.addEventListener("submit", function(e) {
  e.preventDefault();
  if (validateForm()) {
    // 校验通过后的业务逻辑，比如提交表单、生成条形码
    console.log("校验通过，可执行后续操作");
  }
});

function validateForm() {
  const supplier_ref = form.elements["supplier_ref"];
  const supplier_ref_value = supplier_ref.value.trim();
  // 每次校验前先重置自定义错误状态
  supplier_ref.setCustomValidity("");

  if (supplier_ref_value === "") {
    supplier_ref.setCustomValidity(emptymsg);
    // 主动触发错误提示
    supplier_ref.reportValidity();
    return false;
  }
  if (supplier_ref_value.length !== 9){
    supplier_ref.setCustomValidity("编号长度必须为9位");
    supplier_ref.reportValidity();
    return false;
  }
  return true;
}

// 可选优化：输入时实时清除错误状态
document.getElementById("supplier_ref").addEventListener("input", function() {
  this.setCustomValidity("");
});

关键优化点说明 #

• 移除了内联的onsubmit事件绑定，改用标准的事件监听写法，逻辑更清晰
• 每次校验前先调用setCustomValidity("")清空历史错误状态，避免残留
• 错误设置后调用reportValidity()主动触发浏览器的错误提示，不需要等待下一次提交事件
• 输入框改为text类型搭配pattern="\d{9}"校验，既保证仅能输入数字，也保留了前导零
• 新增输入时实时清除错误的逻辑，用户修改内容后自动清除旧的错误提示，体验更好

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