CODEWITHSUNDEEP
jqueryjquery-validate
Ray C Lin
Ray C Lin

Reputation: 703

Jquery Validation Plugin: When the form just become valid, the first submit click do not work

I have a Jquery Validation Plugin problem:

When the form just become valid (the error message is just gone), the first submit click do not work, I need to click again to make it work properly. I suppose when the form is just become valid it is still in a "not submitable" mode. Please is there anyway to make it work from the first click after validated ?? Thank you very much !

<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>

OK, This is a final and tested working code after all the helps:

$('#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()

Upvotes: 0

Views: 2886

Answers (2)

Sparky
Sparky

Reputation: 98758

As per jQuery Validate 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 validated.

In other words, do not create another submit handler function when one is already built into the plugin and it's designed for this exact scenario.

$(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

EDIT:

For my solution to work, you'll need to fix the syntax error with the success callback of your ajax code...

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

Working DEMO: http://jsfiddle.net/3CpBg/

Upvotes: 1

Ben Barden
Ben Barden

Reputation: 2111

Sure. Call $("#signInForm").valid() in your submitForm() function prior to calling $("#signInForm").submit(). Should clear that problem right up.

Upvotes: 1

Related Questions