jQuery Validation表单点击提交按钮不触发验证问题求助

先帮你捋清楚问题的核心：你给提交按钮#btn_insert绑定了独立的click事件，还在事件里加了e.preventDefault()——这直接打断了表单的默认submit行为，而jQuery Validation插件正是依赖表单的submit事件来触发完整验证流程的。所以点击按钮时，代码直接跳过验证逻辑去执行你的AJAX了；而移除按钮ID后，那个click事件绑定失效，表单触发默认submit，Validation的验证逻辑就正常跑起来了。

正确的处理方式 #

咱们应该把AJAX提交逻辑放到Validation的submitHandler回调里，这个函数本来就是专门用来处理验证通过后的提交操作的，完全不需要额外给按钮绑定click事件。具体修改如下：

修改后的JavaScript代码 #

jQuery(document).ready(function(){
  $("#insert_payment").validate({
    rules: {
      code: { required: true, minlength: 3},
      type: { required: true, minlength: 5}
    },
    submitHandler: function(form) {
      // 仅在验证通过后执行AJAX提交
      var _form = $(form).serialize();
      console.log("form:\n", _form);
      $.ajax({
        url: "<?=base_url();?>payment/insert/",
        type: 'post',
        data: _form,
        success: function(response) {
          console.log("response modal new :\n", response);
          $("#insert_modal").modal('hide');
          $("#modal_alert").modal('show');
          $('#tblPayment').DataTable().ajax.reload();
          $("#code").val("");
          $("#type").val("");
        }
      });
      return false; // 彻底阻止表单默认提交行为
    }
  });
});

改动说明 #

1. 移除独立click事件：避免和Validation的提交逻辑冲突，让Validation完全接管表单的验证与提交流程
2. AJAX逻辑移入submitHandler：这个回调只会在所有字段验证通过后触发，完美实现「先验证，再提交」的需求
3. 保留按钮type="submit"：你当前的按钮已经是这个类型，这是Validation触发验证的必要条件，别改成type="button"

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

现在点击提交按钮时，就会先触发Validation的完整验证，验证通过后才会执行AJAX提交，完全符合你的预期啦～