.NET Core 中jQuery AJAX提交表单时客户端模型验证失效问题

• 已经引入的jquery.validate.min.js与jquery.validate.unobtrusive.min.js，作用仅仅是把Razor视图根据模型[Required]特性、html属性生成的验证规则加载到jQuery Validate插件中，不会自动给自定义的JS提交流程接入验证逻辑。
• 这套验证机制的核心触发节点是 表单元素的submit事件：正常点击提交按钮时，表单会先触发submit流程，jQuery Validate插件会在这个节点执行全量字段校验，校验不通过会直接拦截默认提交行为、展示验证错误。
• 现有代码给提交按钮绑定了click事件，在事件回调第一行就调用e.preventDefault()拦截了按钮的默认行为，既没有触发表单的submit阶段，也没有手动调用验证方法，等于所有提前配置好的校验规则、错误提示逻辑都没有执行入口，最终出现空字段也能直接发请求到后端的问题。

• 最适配现有验证机制的改法：把原来绑定在按钮上的click事件，改成绑定在表单的submit事件上，在拦截默认提交后、组装请求前，手动调用jQuery Validate的全量校验方法。
  替换后的代码示例：

  // 移除原来绑定在#dataSend按钮上的click事件
  $("#formElem").on("submit", function (e) {
      // 拦截表单默认跳转提交
      e.preventDefault();
      // 手动触发全量客户端验证，校验不通过直接终止后续逻辑
      if (!$(this).valid()) {
          return;
      }
  
      // 以下原有ajax提交逻辑保持不变，同时兼容文件为空的场景
      var formData = new FormData();
      const selectedFile = $('#ImageData')[0].files[0];
      if (selectedFile) {
          formData.append('ImageData', selectedFile);
      }
      formData.append('ID', document.getElementById('ID').value);
      formData.append('Name', document.getElementById('Name').value);
      formData.append('Description', document.getElementById('Description').value);
      formData.append('btn', 'Save');
  
      $.ajax({
          contentType: false,
          processData: false,
          type: 'POST',
          url: '/Products/AddProduct',
          data: formData,
          success: function (response) {
              window.location.href = "/Products/Index";
          },
          error: function () {
              console.log("error.");
          },
      });
  });
  

• 注意事项：
  • $(表单对象).valid()是jQuery Validate提供的手动触发校验的标准入口，执行后会自动匹配所有已加载的校验规则，校验不通过会自动在对应字段下方展示配置的错误提示，和原生表单提交的验证体验完全一致。
  • 不推荐在按钮的click事件回调里手动调用valid()方法，因为此时事件触发时机早于表单的submit节点，容易和unobtrusive脚本的默认事件绑定产生冲突，出现验证不生效的边缘问题。

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