Question

我已经使用了validate插件和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*/ }
});

jQuery - 使用带有AJAX表单插件的validate插件

1 个答案: