jQuery无法为CellphoneDetails输入字段绑定invalid事件问题求助

问题原因&修复方案 #

现有代码错误点 #

• jQuery ID选择器语法错误：ID选择器仅需1个#，你代码中写的$("##CellphoneDetails")、$("##cellValidDetails")多写了1个#，无法正确匹配到对应元素
• 代码语法错误：addEventListener回调、外层if判断的大括号/小括号不匹配，直接触发JS语法报错，导致submit事件绑定失败
• 事件绑定逻辑错误：你把invalid事件的绑定放在submit事件的回调函数中，只有表单提交触发后才会绑定invalid事件，首次提交时invalid事件尚未绑定，自然无法触发，同时每次提交都会重复绑定，会导致后续逻辑多次执行

修复后代码 #

$(document).ready(function() {
  var error = 0;
  // 提前在页面加载完成后就绑定invalid事件
  $("#CellphoneDetails").on("invalid", function(e) {
    // 可加这行阻止浏览器原生的校验提示弹窗
    e.preventDefault();
    alert($(this).val());
    error = 1;
    if ($(this).val().trim() !== '') {
      $(this).focus();
      $("#cellValidDetails").show();
    }
  });

  // 绑定表单提交事件，直接用jQuery写法避免兼容判断
  $("#contactEditForm").on("submit", function(e) {
    alert('test test');
    error = 0;
    // 若需要阻止默认提交行为可加下行代码
    // e.preventDefault();
    // 后续可通过error变量判断校验是否通过，执行对应逻辑
  });
});

补充注意事项 #

确保HTML中CellphoneDetails输入框的pattern属性支持空值跳过，示例规则：

<input type="text" id="CellphoneDetails" pattern="^$|^1[3-9]\d{9}$" placeholder="请输入手机号">

如果不需要浏览器自带的校验提示，可给form标签添加novalidate属性，完全走自定义校验逻辑。

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