jQuery验证和表单插件

Question

我一直在使用jQuery表单插件和jQuery验证插件：

表单插件：http://jquery.malsup.com/form/ 验证插件：http://bassistance.de/jquery-plugins/jquery-plugin-validation/ 我正在尝试让它们一起工作，先验证文档，然后使用jQuery表单插件提交。

有什么想法吗？

- user39980

Answer 1

来自文档:

$(".selector").validate({
   submitHandler: function(form) {
    $(form).ajaxSubmit();
   }
})

以上代码是用于验证表单并提交的jQuery插件。当表单通过验证后，它将使用ajax方式提交。

- Ty W

---

唉，文档是胡说八道。上面的代码执行标准表单提交，但将内容类型设置为“XMLHttpRequest” - 如果您查看使用此提交的内容，则与标准提交获得的内容完全相同。我现在正在尝试解决这个问题，并在找到解决方案后会发布回复。参考https://dev59.com/43bZa4cB1Zd3GeqPIalE - Dave Sag

我的解决方案是修改我的测试，并接受jQuery Forms插件将表单数据作为URL编码参数字符串发送，而不是作为字符串化的JSON哈希表这一现实。顺便提一下。 - Dave Sag

Answer 2

根据http://malsup.com/jquery/form/#validation，您可以使用beforeSubmit选项来提供一个回调函数，该函数返回true或false。

在这个回调函数中，只需使用此处描述的.valid()插件方法http://jqueryvalidation.org/valid。

$(document).ready(function() {
    // jQuery Validation Plugin
    $("#myForm1").validate();

    // jQuery form Plugin
    var options = { 
        target:        '#output1',   // target element(s) to be updated with server     response 
        beforeSubmit:  validate,     // pre-submit callback 
        success:       showResponse  // post-submit callback 
    };

    // bind form using 'ajaxForm' 
    $('#myForm1').ajaxForm(options); 
});

// Return validation status from jQuery validate plugin.
function validate(formData, jqForm, options) { 
    return $('#myForm1').valid();
}

- Wintermute