AJAX 提交前的 jQuery 验证答案

【问题标题】：jQuery validation before AJAX submitAJAX 提交前的 jQuery 验证
【发布时间】：2012-07-28 19:21:55
【问题描述】：

我有一个带有以下 jQuery 验证代码的简单注册表单：

$(document).ready(function(){

    $("#registerForm").validate({

    rules: {

    Username: {required: true, minlength: 6},   
    Password: {required: true, minlength: 6},
    re_Password: {required: true, equalTo: "#Password"} 

    },

    });     
});

在我提交表单之前验证正确。

当我还想对表单进行 AJAX 提交时，问题就来了，因为表单不再验证并在没有验证的情况下提交：

<form id="registerForm" action="register.php" method="post" onsubmit="xmlhttpPost('register.php', 'registerForm', 'signup-box'); return false;">

默认是：

<form method="post" id="registerForm" action="register.php">

如果有人能指出我正确的方向或给我一些解决这个问题的起点，我将不胜感激。

谢谢。

感谢 Kundan Singh Chouhan，我找到了将以下代码添加到 document.ready 块的解决方案：

$("#registerForm").submit(function(){

    if($("#registerForm").valid()){

        xmlhttpPost('register.php', 'registerForm', 'signup-box'); 

   }

return false;

});

【问题讨论】：

正确的方法是使用submitHandler - 只要表单提交并且有效，它就会被触发。您这样做的方式将进行多次验证。

标签： jquery ajax validation jquery-validate

【解决方案1】：

我认为您应该使用 JQuery Validator 的提交处理程序，如下所示：

$('#id_of_form').validate(){

    // rules and messages

    submitHandler: function(form) {

    // place your code for Ajax Request here...

    }
}

【讨论】：

【解决方案2】：

我认为您应该必须从表单标签中删除 onsubmit 事件并在 document.ready() 中编写以下脚本

$("form").submit(function(){
   if($("form").validate()){
      xmlhttpPost('register.php', 'registerForm', 'signup-box'); 
   }
   return false;
});

希望这能解决您的问题。

【讨论】：

我对您的代码做了一些小修改，现在可以完美运行了。非常感谢。

【解决方案3】：

你可以使用jQuery.Validation这里是一些示例代码：

    var $form = $("form");
    $form.validate({
        rules: {
            Username: {required: true, minlength: 6},   
            Password: {required: true, minlength: 6},
            re_Password: {required: true, equalTo: "#Password"} 
        },
        invalidHandler: function(event, validator) {
            // 'this' refers to the form
            var errors = validator.numberOfInvalids();
            if (errors) {
                var message = errors === 1
                  ? 'You missed 1 field. It has been highlighted'
                  : 'You missed ' + errors + ' fields. They have been highlighted';  
            }
        },
        submitHandler: function (form) {

            var $form = $(form);
            $.ajax({
                url: destinationUrl,
                method: "POST",
                data: $form.serialize()
                })
                .done(function (result) {
                    // show some message, etc...

                    return false; // blocks redirect after submission via ajax
                })
                .fail(function (response, error) {
                    // failed
                })
                .always(function() {

                });
        }
    });

问候。

【讨论】：