如何仅在jQuery验证插件成功时发送ajax验证

How to send an ajax validation only if jQuery validation plugin succeed?

本文关键字：验证 ajax 成功插件何仅 jQuery 更新时间：2023-09-26

我使用jQuery验证插件来验证表单字段。现在我想发送一个ajax请求只有当字段是有效的，这意味着jQuery验证插件成功后。

JavaScript:

$(function(){
   $("#form").validate({
       errorPlacement: function(label, element) {
        label.addClass('arrow');
        label.insertAfter(element);
        },
        wrapper: 'span',
       
       rules: {
           email: {
               required: true,
               email: true
           },
           name: {
               required: true,
               minlength: 5
           },
           password: {
               required: true,
               minlength: 6
           },
           rePassword:{
               required: true,
               minlength: 6,
               equalTo: "#password"
           },
           birthDate:{
               required: true
           },
           aboutYou:{
               required: true
           }
           
       },
       messages:{
           email: {
               required: "this field is required!",
               email: "please enter a valid email!"
           },
           name:{
               required: "this field is required!",
               minlength: "name needs to have at least 5 chars!"
           },
           password:{
               required: "password is required!",
               minlength: "password needs to have at least 6 chars!"
           },
           rePassword:{
               required: "rePassword is required!",
               minlength: "rePassword needs to have at least 6 chars!",
               equalTo: "passwords don't match!"
           }
       }
   }); 
});

<!DOCTYPE html>
<html>
    <head>
        <title>Register</title>
        <meta charset="utf-8">
        <script src="includes/jquery-1.11.3.js"></script>
        <link rel="stylesheet" type="text/css" href="css/css.css">
        <script src="js/jquery.validate.js"></script>
        <script src="js/jquery.validate.min.js"></script>
        <script src="js/registerForm.js"></script>
        <?php 
            require_once'includes/DAL.php';
        ?>
        <script>
           $(function(){
                $( "#form" ).submit(function(){
                    // run this code only if validation plugin succeed?
                    $.ajax({
                        method: "post",
                        url: "API.php", 
                        data:{email: $("#email").val(), name: $("#name").val(), password: $("#password").val(), rePassword: $("#rePassword").val(), birthDate: $("#birthDate").val(), aboutYou: $("#aboutYou").val()},
                        success: function(result){$("#div1").html(result);
                    }});
                });
            });
        </script>
    </head>
    <body>
        <form method="post" id="form">
            <label>Email</label><br/>
            <input type="text" name="email" id="email" placeholder="Enter your email"/><br/>
            <label>Name</label><br/>
            <input type="text" name="name" id="name" placeholder="Enter your name"/><br/>
            <label>Password</label><br/>
            <input type="password" name="password" id="password" placeholder="Enter your password"/><br/>
            <label>re-Password</label><br/>
            <input type="password" name="rePassword" id="rePassword" placeholder="Repeat password"/><br/>
            <label>Birth Date</label><br/>
            <input type="date" name="birthDate" id="birthDate"/><br/>
            <label>About yourself</label><br/>
            <textarea name="aboutYou" id="aboutYou" placeholder="About yourself..."></textarea>
            <input type="submit" id="submit" value="Register!"/>
            <div id="div1"></div>
        </form>
    </body>
</html>

我猜你正在使用以下插件:http://jqueryvalidation.org/documentation/

你要找的可能是这个:

submitHandler (default: native form submit)
Type: Function()
Callback for handling the actual submit when the form is valid. Gets the form as the only argument. Replaces the default submit. The right place to submit a form via Ajax after it is validated.

你可以这样写

$(".selector").validate({
  submitHandler: function(form) {
    $(form).ajaxSubmit();
  }
});

API文档:http://jqueryvalidation.org/validate

======================

如果这不是你正在使用的插件，寻找像这样的:

"当表单有效时处理实际提交的回调函数"在插件API文档中。它肯定会被实现为一个回调或一个承诺对象。

在初始验证器插件脚本中添加函数(errors, event)

$(function(){
   $("#form").validate({
       errorPlacement: function(label, element) {
        label.addClass('arrow');
        label.insertAfter(element);
        },
        wrapper: 'span',
       rules: {
           email: {
               required: true,
               email: true
           },
           name: {
               required: true,
               minlength: 5
           },
           password: {
               required: true,
               minlength: 6
           },
           rePassword:{
               required: true,
               minlength: 6,
               equalTo: "#password"
           },
           birthDate:{
               required: true
           },
           aboutYou:{
               required: true
           }
       },
       messages:{
           email: {
               required: "this field is required!",
               email: "please enter a valid email!"
           },
           name:{
               required: "this field is required!",
               minlength: "name needs to have at least 5 chars!"
           },
           password:{
               required: "password is required!",
               minlength: "password needs to have at least 6 chars!"
           },
           rePassword:{
               required: "rePassword is required!",
               minlength: "rePassword needs to have at least 6 chars!",
               equalTo: "passwords don't match!"
           }
       },
       function(errors, event) {
           if (!errors.length) _submit();
       }
   }); 
});

function _submit() {
    $( "#form" ).submit(function(){
        $.ajax({
            method: "post",
            url: "API.php", 
            data:{email: $("#email").val(), name: $("#name").val(), password: $("#password").val(), rePassword: $("#rePassword").val(), birthDate: $("#birthDate").val(), aboutYou: $("#aboutYou").val()},
            success: function(result){$("#div1").html(result);
         }});
     });
}