如何僅在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驗證？

回答

相關問題