jQuery使用submitHandler中的AJAX验证，第二次点击提交？

Question

我是AJAX的新手，并使用此代码来回答这里jQuery Ajax POST example with PHP与WordPress网站上的表单进行整合。它工作得很好，但我有麻烦与jQuery验证

整合它，我试图把的JavaScript从网页上面到submitHandler功能如下

$("#my-form").validate({ 
    submitHandler: function(form) { 
    **js from other page** 
    } 
}); 

我的表单验证第一个点击。然后，如果我输入了输入内容并且没有发生任何反应，我必须再次单击表单才能使用AJAX正确提交表单。下面是一个jsfiddle。任何帮助表示感谢。

的我的代码jsfiddle认为它会记录一个错误安慰，因为form.php的是不挂

Answer 1

的submitHandler的工作是提交表单，不登记表单提交事件处理程序。

当formm提交事件被触发时，submitHandler会被调用，而不是提交您正在注册提交处理程序的表单，因此当表单提交事件首次被触发时，表单未被提交。当第一次触发提交事件时，验证器会处理提交事件，然后触发您注册的处理程序，触发ajax请求。

在你只需要在submitHandler发送Ajax请求没有必要注册事件处理

$("#add-form").validate({ 
    submitHandler: function (form) { 
     // setup some local variables 
     var $form = $(form); 
     // let's select and cache all the fields 
     var $inputs = $form.find("input, select, button, textarea"); 
     // serialize the data in the form 
     var serializedData = $form.serialize(); 

     // let's disable the inputs for the duration of the ajax request 
     $inputs.prop("disabled", true); 

     // fire off the request to /form.php 

     request = $.ajax({ 
      url: "forms.php", 
      type: "post", 
      data: serializedData 
     }); 

     // callback handler that will be called on success 
     request.done(function (response, textStatus, jqXHR) { 
      // log a message to the console 
      console.log("Hooray, it worked!"); 
      alert("success awesome"); 
      $('#add--response').html('<div class="alert alert-success"><button type="button" class="close" data-dismiss="alert">×</button><strong>Well done!</strong> You successfully read this important alert message.</div>'); 
     }); 

     // callback handler that will be called on failure 
     request.fail(function (jqXHR, textStatus, errorThrown) { 
      // log the error to the console 
      console.error(
       "The following error occured: " + textStatus, errorThrown); 
     }); 

     // callback handler that will be called regardless 
     // if the request failed or succeeded 
     request.always(function() { 
      // reenable the inputs 
      $inputs.prop("disabled", false); 
     }); 

    } 
}); 

Answer 2

调用$("#add-form").submit(function(){...})不提交表单。它绑定一个处理程序，该处理程序说明如何执行用户提交表单时的。这就是为什么你必须提交两次：第一次调用validate插件的提交处理程序，它验证数据并运行你的函数，第二次调用你第一次添加的提交处理程序。

不要将代码包装在.submit()中，只需在submitHandler:函数中直接执行即可。变化：

var $form = $(this); 

到：

var $form = $(form); 

你不需要event.PreventDefault()，该验证插件会替你。

Answer 3

$("#add-form").validate({ 
    submitHandler: function (form) { 
     var request; 
     // bind to the submit event of our form 



     // let's select and cache all the fields 
     var $inputs = $(form).find("input, select, button, textarea"); 
     // serialize the data in the form 
     var serializedData = $(form).serialize(); 

     // let's disable the inputs for the duration of the ajax request 
     $inputs.prop("disabled", true); 

     // fire off the request to /form.php 

     request = $.ajax({ 
       url: "forms.php", 
       type: "post", 
       data: serializedData 
     }); 

     // callback handler that will be called on success 
     request.done(function (response, textStatus, jqXHR) { 
       // log a message to the console 
       console.log("Hooray, it worked!"); 
       alert("success awesome"); 
       $('#add--response').html('<div class="alert alert-success"><button type="button" class="close" data-dismiss="alert">×</button><strong>Well done!</strong> You successfully read this important alert message.</div>'); 
     }); 

     // callback handler that will be called on failure 
     request.fail(function (jqXHR, textStatus, errorThrown) { 
       // log the error to the console 
       console.error(
        "The following error occured: " + textStatus, errorThrown); 
     }); 

      // callback handler that will be called regardless 
      // if the request failed or succeeded 
     request.always(function() { 
       // reenable the inputs 
       $inputs.prop("disabled", false); 
     });    

    } 
});