jQuery - 将验证插件与 AJAX 表单插件一起使用

Question

我已经同时使用了验证插件和 AJAX 表单插件并取得了巨大的成功，但同时使用它们让我感到困惑。

如果我使用 validate 插件进行验证，那么在成功后，发布 AJAX 表单，没有任何反应。字面上地。即使在 Firebug 中，AJAX 插件似乎也没有任何作用。

如果我反过来尝试，我使用 beforeCallback 然后调用 jQuery validate 插件...没有完成验证，但表单提交到页面。

所以我可以让每个插件工作，但不能一起工作。

有人知道吗？我描述的第一条路线在这里使用如下：

function sendFormVacancy() {

    alert("submit"); // This does get called, but the code below doesn't submit the form.

    var options = {

        beforeSubmit:  validateRequest,
        target:     "#messages",
        clearForm:  true,
        type:       "POST",
        url:        "/form-vacancy.php",

        success: function() {
            $('#messages').html("<p><?php _e("Application sent!", "tokheim"); ?></p>").css('color', 'green');
        },

        error: function() {
            $('#messages').html("<p><?php _e("Sorry, an error occurred.", "tokheim"); ?></p>").css('color', 'red'); 
        }

    }; 

    $("#static-form-vacancy").ajaxForm(options);

}

$("#static-form-vacancy").validate({ 

    rules: { 

        fieldfile:"required",
        fieldtitle:"required",
        fieldfirstname:{ required: true }, 
        fieldlastname:"required", 
        fieldaddress1:"required",
        fieldcity:"required",
        fieldcountry:"required",
        fieldphone:"required",
        fieldemail:{ required: true, email: true },
        fieldcontactmethod:"required",
        fieldrelocate:"required",
        fieldcomments:"required"

    }, 

    messages: { 

        fieldfile:"<?php _e("Select a file to upload", "tokheim"); ?>",
        fieldtitle:"<?php _e("Select your title", "tokheim"); ?>",
        fieldfirstname:{ required:"<?php _e("Enter your firstname", "tokheim"); ?>" },
        fieldlastname:"<?php _e("Enter your lastname", "tokheim"); ?>",
        fieldaddress1:"<?php _e("Enter your address", "tokheim"); ?>",
        fieldcity:"<?php _e("Enter your city", "tokheim"); ?>",
        fieldcountry:"<?php _e("Enter your country", "tokheim"); ?>",
        fieldphone:"<?php _e("Enter your phone number", "tokheim"); ?>",
        fieldemail:{ required:"<?php _e("Please enter an email address", "tokheim"); ?>", email:"<?php _e("Email is not valid", "tokheim"); ?>" },
        fieldcontactmethod:"<?php _e("Select an option", "tokheim"); ?>",
        fieldrelocate:"<?php _e("Select an option", "tokheim"); ?>",
        fieldcomments:"<?php _e("Enter your comments", "tokheim"); ?>"

    },

    submitHandler: function() { 
        sendFormVacancy(); 
    }

});

我使用的 jQuery 验证插件是： http://bassistance.de/jquery-plugins/jquery-plugin-validation/

我使用的 AJAX 表单提交脚本是： http://malsup.com/jquery/form/

现在，我可以简单地使用 AJAX 以“手动”方式提交它......但是，我使用这个插件的原因是因为它通过 AJAX 处理文件上传，这是我需要的功能。

任何帮助将不胜感激。我要拔头发了！

这可能与每个插件以某种方式绑定到表单并锁定另一个有关吗？

谢谢， 迈克尔。

Answer 1

在 ajaxForm 的 beforeSubmit 处理程序中调用 .valid()。

$('#myForm').validate({
    rules: {
        /* rules */
    },
    messages: { 
        /* messages */
    },
    submitHandler: function () {
        /* update ui before post */
    }
});

$('#myForm').ajaxForm({
    dataType: 'json',
    beforeSubmit: function () { return $('#myForm').valid(); },
    success: function (data) { /*callback, update ui after post*/ }
});