AJAX提交前的jQuery验证

Question

我有一个简单的注册表单，其中包含以下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，我找到了在文档中添加以下代码的解决方案。准备块：

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

Answer 1

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

$('#id_of_form').validate(){
    // rules and messages
    submitHandler: function(form) {
    // place your code for Ajax Request here...
    }
}

Answer 2

我认为您应该从表单标记中删除onsubmit事件，并在document.ready（）中编写以下脚本

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

希望这能解决你的问题。

Answer 3

您可以使用jQuery。这里的验证是一些示例代码：

    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() {
                });
        }
    });

问候。