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

我用jQuery验证插件来验证表单域。现在我只想在字段有效的情况下发送ajax请求，这意味着jQuery验证插件成功后。如何仅在jQuery验证插件成功时发送ajax验证？

的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>

来源

2015-09-27 Doron Torangy

即时猜测你使用以下插件：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文档中。这肯定会作为回调或承诺对象来实现。

来源

2015-09-27 08:22:11 alcedo

我想是http://rickharrison.github.io/validate.js/ – Sojtin

将函数（错误，事件）附加到您的initail验证器插件脚本。

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

来源

2015-09-27 08:26:59 Sojtin

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

回答

相关问题