0

我有一个 Jquery 验证插件问题：

当表单刚刚生效时（错误信息刚刚消失），第一次提交点击不起作用，我需要再次点击才能使其正常工作。我想当表格刚刚生效时，它仍然处于“不可提交”模式。请问在验证后是否可以从第一次点击开始工作？非常感谢你 ！

<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()
4

2 回答 2

1

当然。在调用之前调用 你$("#signInForm").valid()的函数。应该马上解决这个问题。submitForm()$("#signInForm").submit()

于 2013-06-14T15:07:35.867 回答
1

根据jQuery Validate 文档：

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/

于 2013-06-14T15:14:17.710 回答