如何将 jQuery Validate 与此 ajax 结合使用？

Question

我有一个 ajax post 可以很好地提交，但我需要将它与 jQuery 结合使用，然后再提交，但我无法使其正常工作。

我尝试在提交处理程序中提交 ajax，但这会使我表单中的某些字段消失，或者在某些情况下只是不更新我的数据库。

单独使用这个效果很好：

$('#myform').submit(function(e){ 
    e.preventDefault();

    var url = 'http://example.com';
    var data = $('#myform').serializeArray();

    $.ajax({
      type: "POST",
      url: url,
      data: data,
      success: function(){
        $('.pop_up').fadeOut();
      } 
    });

});

但以下代码并非 100% 有效（只是有时和某些部分）。有时 post 电子邮件字段为空，有时其他字段很奇怪。

var url = 'http://example.com';
var data = $('#myform').serializeArray();
$('#myform').validate({

rules: {
        emailaddress: {
          required: true,
          email: true
        },
        meeting: {
            required: {
                depends: function () {
                    return $('input[name=in_12_months]').is(':checked')==false && $('input[name=in_6_months]').is(':checked')==false
                }
            }
        }

},

submitHandler: function(form) {
    $.ajax({
      type: "POST",
      url: url,
      data: data,
      success: function(){
        $('.pop_up').fadeOut(); 
        }         
    });
}
});

与 Submithandler 分开的验证工作，所以它不会 post 除非必填字段是正确的。

那么我如何将这些组合成 post 的 100% 可靠数据呢？

我的网页中有多个表格，我是否应该使用特定表格而不是 submitHandler: function(form)？

Answer 1

您的代码...

var url = 'http://example.com';
var data = $('#myform').serializeArray();

$('#myform').validate({
    .....
    submitHandler: function(form) {
        $.ajax({
            type: "POST",
            url: url,
            data: data, ....

您不能序列化 submitHandler 之外的数据。它在这里不起作用，因为调用 .serialize() 时表单是空的。

将它放在 submitHandler 中，同时利用回调函数的 form 参数...

$('#myform').validate({
    .....
    submitHandler: function(form) {
        $.ajax({
            type: "POST",
            url: url,
            data: $(form).serialize(),
            ....

您可能还想使用 .serialize() 而不是 .serializeArray()。

阅读the .ajax() documentation for data:

Data to be sent to the server. It is converted to a query string, if not already a string. It's appended to the url for GET-requests. See processData option to prevent this automatic processing. Object must be Key/Value pairs. If value is an Array, jQuery serializes multiple values with same key based on the value of the traditional setting (described below).

如何将 jQuery Validate 与此 ajax 结合使用？

How can I combine jQuery Validate with this ajax?

forms

ajax

jquery

jquery-validate