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

【问题标题】：Run function after form has validated with jQuery使用 jQuery 验证表单后运行函数
【发布时间】：2014-07-12 14:40:32
【问题描述】：

这里我有一个使用 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 步运行相同的操作。

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

【问题讨论】：

如果您有每个步骤的表格，可以使用 submitHandler 。如果没有更好地了解哪些步骤，就不太清楚问题是什么
您说您只想在所有字段都经过验证后才显示按钮，所以一旦第 1 步完成，所有字段都还没有经过验证。然后你说你希望每一步都发生这种情况..？每个步骤都有单独的表格吗？请澄清问题。
@TilwinJoy 在每个部分中的所有字段都经过验证后，有两种形式，每个部分中都有一个。我希望验证两者，然后通过 ajax 将它们作为一种形式一起发布到我的 PHP 文件中

标签： javascript jquery html forms jquery-validate

【解决方案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
});

【讨论】：