Question

我有一个Jquery Validation Plugin问题：

当表单生效时（错误消息刚刚消失），第一次提交点击不起作用，我需要再次单击以使其正常工作。我认为当表单变得有效时，它仍处于“不可提交”模式。无论如何，请在验证后从第一次点击开始工作吗？非常感谢你！

<html>
<head>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/additional-methods.js"></script>
</head>

<body>

      <div class="row-fluid" id="top">
          <!--top-->
      </div>

      <div class="row-fluid">
       <form id="signInForm">
             <label class="control-label" for="usermail">e-mail</label>
             <input type="text" id="usermail" name="usermail">
             <span class="errMsg">*</span>

             <label class="control-label" for="pass">Password</label>
             <input type="password" id="pass" name="pass">
             <span class="errMsg">*</span>

             <button type="submit">Sign In</button>
       </form>                   
      </div>
 <script type="text/javascript">
      $(document).ready(function () {
            $('#signInForm').validate({ 
                                   debug: false,
                       rules: { usermail:{required:true,email:true,remote:"Ajax_isSigned.php"},
                                    pass:"required"
                               },
                    messages: { usermail:{required:"Required !",email:"wrong format",remote:"mail never been registered"},
                                    pass:"Required !"
                               },
               submitHandler: function(){submitForm()}
                           })// End of validate()

}); // End of  $(document).ready

function submitForm(){
$("#signInForm").submit(function(event) {

                               $.ajax({
                                      type: "POST",
                                       url: "Ajax_Login2.php",
                                      data: $(this).serialize(),
                                   success: function(html){ if(html=='success'){;$('#top').text('OK')}}
                                      });// end of $.ajax
                                      return false;
                                        });
}
</script>                                     
</body>
</html>

好的，这是经过所有帮助后的最终测试工作代码：

$('#signInForm').validate({ 
                       debug: false,
                errorElement:"span",
                  errorClass:"errMsg",
                   onfocusout: function () {$('#usermail').valid();}, // only check on focusout, NOT onChange.
                      onkeyup: function () {$('#pass').valid()}, // check on onChange.            
                submitHandler: function(){submitForm();return false;
                               },
                        rules: {
                                  usermail:{required:true,email:true,remote:"Ajax_isSigned.php"},
                                  pass:"required"
                               },

                    messages: {
                                 usermail:{required:"Required !",email:"wrong format",remote:"mail never been registered"},
                                 pass:"Required !"
                               }


                        })// End of validate()

function submitForm(){

                             $.ajax({
                                      type: "POST",
                                      url: "Ajax_Login.php",
                                      data: $('#signInForm').serialize(),
                       success: function(html){
                                              if(html=='success'){$('#top').append('OK<br>')}
                                              if(html=='fail'){$('#top').append('NG<br>')}
                                               }
                                      });// end of $.ajax


                       }// end of submitForm()

Answer 1

不确定。在致电$("#signInForm").valid()之前，请在submitForm()功能中致电$("#signInForm").submit()。应该立即解决这个问题。

Answer 2

根据jQuery Validate documentation：

submitHandler（默认：原生表单提交）：

类型：功能（）

在表单有效时回调处理实际提交。获取   形式作为唯一的论点。替换默认提交。 正确   在验证后通过Ajax提交表单。

换句话说，当一个已经内置到插件中时，不要创建另一个提交处理函数，并且它是为这个确切的场景而设计的。

$(document).ready(function () {

    $('#signInForm').validate({
        debug: false,
        rules: {
            usermail: {
                required: true,
                email: true,
                remote: "Ajax_isSigned.php"
            },
            pass: "required"
        },
        messages: {
            usermail: {
                required: "Required !",
                email: "wrong format",
                remote: "mail never been registered"
            },
            pass: "Required !"
        },
        submitHandler: function (form) {
            $.ajax({
                type: "POST",
                url: "Ajax_Login2.php",
                data: form.serialize(),
                success: function (html) {
                    if (html == 'success') {
                        $('#top').text('OK')
                    }
                }
            }); // end of $.ajax
            return false;
        }
    }) // End of validate()

}); // End of  $(document).ready

修改

要使我的解决方案正常工作，您需要使用success代码的ajax回调修复语法错误...

success: function (html) { if (html == 'success') {; // <--- remove this semicolon $('#top').text('OK') } }

工作演示：http://jsfiddle.net/3CpBg/

Jquery Validation插件：当表单生效时，第一次提交点击不起作用

2 个答案: