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

Posted 2023-05-09

【中文标题】jQuery - 将验证插件与 AJAX 表单插件一起使用

【英文标题】：jQuery - Using validate plugin with AJAX form plugin

【发布时间】：2012-11-28 01:04:00

【问题描述】：

我已经同时使用了验证插件和 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 处理文件上传，这是我需要的功能。

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

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

谢谢， 迈克尔。

【参考方案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*/ 
);