Question

这里我有一个使用jquery的Validate（）插件的脚本。

 $(function() {

     // Setup form validation on the #register-form element
     $("#form").validate({

         // Specify the validation rules
         rules: {
             username: {
                required: true,
                maxlength: 16,
                minlength: 6,
                  remote: {
                url: "../inc/check.php",
                type: "post",
                data: {
                  username: function() {
                    return $( "#username" ).val();
                  }
                }
              }
            },
             email: {
                 required: true,
                 email: true
             },
             password: "required",
            password_again: {
              equalTo: "#password",
              minlength: 3,
            },
             agree: "required"
         },

         // Specify the validation error messages
         messages: {
             Username: "Please enter a username",
             password: {
                 required: "Please provide a password",
                 minlength: "Your password must be at least 5 characters long"
             },
             email: "Please enter a valid email address",
             agree: "Please accept our policy"
         },
     });

});

然后是表格

<section id="secOne">
    <div class="well controller">
        <form  class="form-horizontal" id="form">
            <div class="control-group">
                <label class="control-label">Username:&nbsp;</label><input type="text" name="username" value="" placeholder="E.g Batman96" id="username" required><img id="checkimg" src=""><br><hr>
                <label class="control-label">Email:&nbsp;</label><input type="text" name="email" id="email" placeholder="E.g joebloggs@google.com..." value="" class="form-control" required><img id="checkimg2" src=""><br><hr>        
                <label class="control-label">Password:&nbsp;</label><input type="password" name="password" id="password" value="" class="form-control" required><br><hr>            
                <label class="control-label">Confirm Password:&nbsp;</label><input type="password" name="password_again" id="password_again" value="" class="form-control" required><img id="checkimg3" src=""><br><hr>
            </div>
        </form>
        <button class="btn btn-primary" id="step1" value="Next Step">Next Step</button>
    </div>

</section>

该按钮已应用display:none;。

我希望在验证所有字段后，在按钮上使用fadeIn()。我查看submitHandler()来执行此操作，但我有多个部分在注册过程中淡入淡出。我只希望在最后提交数据，在第3步，这是第1步，我需要在第2步运行相同的内容。

成功验证所有字段后，如何运行函数？

Answer 1

如果我理解正确，您希望在多个表单上执行相同的验证。您可以将验证选项保存在变量中并使用它初始化两个表单，如下所示：

$(function() {

  var validations = { // common validation options
     // Specify the validation rules
     rules: {
         username: {
            required: true,
            maxlength: 16,
            minlength: 6,
              remote: {
            url: "../inc/check.php",
            type: "post",
            data: {
              username: function() {
                return $( "#username" ).val();
              }
            }
          }
        },
         email: {
             required: true,
             email: true
         },
         password: "required",
        password_again: {
          equalTo: "#password",
          minlength: 3,
        },
         agree: "required"
     },

     // Specify the validation error messages
     messages: {
         Username: "Please enter a username",
         password: {
             required: "Please provide a password",
             minlength: "Your password must be at least 5 characters long"
         },
         email: "Please enter a valid email address",
         agree: "Please accept our policy"
     },
   }
   // Setup form validation on the #register-form element
   $("#form").validate(validations); // setup validation for step1
   $("#form1").validate(validations); // setup validation for step2
});

使用jQuery验证表单后运行函数

1 个答案: