使用jquery验证插件进行远程验证后如何使用ajax提交表单

问题描述

我有一个表单，我使用 jquery remote 检查现有数据，它检查成功，但完成填写表单后，我需要将数据保存到数据库。但是 submitHandler 似乎不起作用。 这是我的示例代码

// html 表单

        <form action="save.PHP" method="post" id="createForm">
            <div class="input-field">
                <label for="name">Name</label>
                <input type="text" name="name" id="name">
            </div>
          <div class="input-field">
            <label for="name">Email</label>
            <input type="text" name="email" id="email">
          </div>
            <button>save</button>
        </form>

// jquery 验证

      $('#createForm').validate({
          onkeyup: false,rules: {
              name: { required: true },email: {
                  required: true,remote: {
                      url: 'check_email.PHP',type: 'post',dataType:'json',dataFilter: function(data){let obj = eval('('+data+')'); return obj.valid; },data:{email: function(){ return $('#email').val(); } }
                  }
              }
          },messages: {
              name: { required: "Enter a name." }
              email: { required: "Enter a email.",remote: "{0} This email exists." }
          },submitHandler: function(form) 
          {
                $.ajax({
                   url : $(form).attr('action'),method: 'post',data: $(form).serialize(),dataType: 'json',success: function(data){
                      show_data();
                   }
                });
          }
      });

解决方法

我找到了一个解决方案，当使用 csrf 令牌自动生成时，jquery 远程验证它我们可以在 jquery 验证插件初始化之前使用 ajaxSetup({async: false})，或者我们可以设置 remote:{ async: false }，和避免使用 contentType:false 通过删除它。这将防止由输入表单操作 url 的远程 url 引起的双重请求。

   ajaxSetup({
      async: false
   });

或

       rules: {
          email: {
              required: true,remote: {
                  url: 'your url',type: 'post',async:false,dataType:'json',dataFilter: function(data){let obj = eval('('+data+')'); return obj.valid; },data:{}
              }
          }