仅当jQuery验证插件成功时如何发送Ajax验证？

Question

我使用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>

Answer 1

我猜您正在使用以下插件： 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文档中。 绝对将其实现为回调或promise对象。

Answer 2

将函数（错误，事件）追加到您的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);
         }});
     });
}

仅当jQuery验证插件成功时如何发送Ajax验证？

问题描述

2 个解决方案

解决方案1
2 已采纳 2015-09-27 08:22:11

解决方案2
0 2015-09-27 08:26:59

仅当jQuery验证插件成功时如何发送Ajax验证？

问题描述

2 个解决方案

解决方案1 2 已采纳 2015-09-27 08:22:11

解决方案2 0 2015-09-27 08:26:59

解决方案1
2 已采纳 2015-09-27 08:22:11

解决方案2
0 2015-09-27 08:26:59