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

【问题标题】：How can I combine jQuery Validate with this ajax?如何将 jQuery Validate 与此 ajax 结合使用？
【发布时间】：2017-04-21 08:34:39
【问题描述】：

我有一个 ajax 帖子可以很好地提交，但我需要在提交之前将它与 jQuery Validate 结合起来，但我无法让它工作。

我尝试在提交处理程序中提交 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% 工作（只是有时和某些部分）。有时它发布的电子邮件字段为空，有时其他字段很古怪。

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 分离的验证有效，因此除非必填字段正常，否则不会发布。

那么，我如何将这些数据与 100% 可靠且发布良好的数据结合起来呢？

我的网页中有多个表单，我是否应该填写具体的表单而不是submitHandler: function(form)？

【问题讨论】：

“我尝试在提交处理程序中提交 ajax，但这会导致表单中的某些字段消失，或者在某些情况下不更新我的数据库。” ~这毫无意义......submitHandler 是正确执行此操作的唯一方法，数百万人使用此插件没有此类问题。向我们展示一个更完整的演示，包括相关的 HTML。
“但是下面的代码不能 100% 工作（只是有时和某些部分）。有时它发布时电子邮件字段为空，有时其他字段很古怪。” 〜请解决您的问题，以便用足够的细节更好地解释一切。没有人知道“其他领域很古怪”是什么意思。

标签： jquery ajax forms jquery-validate

【解决方案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：

要发送到服务器的数据。如果还不是字符串，则将其转换为查询字符串。它附加到 GET 请求的 url。请参阅 processData 选项以防止此自动处理。对象必须是键/值对。如果 value 是一个 Array，jQuery 会根据传统设置的 value 序列化多个具有相同 key 的值（如下所述）。

【讨论】：

美丽，闪亮！