jQuery Validation and submitting a form

Question

I am using jQuery validation to check a login form. It does the basic input checks and then runs an AJAX call to see if the login details are valid.

Upon receiving a successful response from this call, I am trying to submit the form so it posts to the URL I specified in the HTML.

My issue is that when this form posts, it gets stuck in the validation loop and tries to validate it every time.

$(document).ready(function() {

    ccLogin.$container = $("#form_login");

    // Login Form & Validation
    ccLogin.$container.validate({
        rules: {
            email: {
                required: true
            },

            pass: {
                required: true
            },
        },

        highlight: function(element) {
            $(element).closest('.input-group').addClass('validate-has-error');
        },

        unhighlight: function(element) {
            $(element).closest('.input-group').removeClass('validate-has-error');
        },

        submitHandler: function(ev) {

            $(".login-page").addClass('logging-in'); // This will hide the login form and init the progress bar

            // Hide Errors
            $(".form-login-error").slideUp('fast');

            // We will wait till the transition ends                
            setTimeout(function() {
                var random_pct = 25 + Math.round(Math.random() * 30);

                // The form data is submitted, we can forward the progress to 70%
                ccLogin.setPercentage(40 + random_pct);

                var formData = ccLogin.$container.serialize();

                // Send data to the server
                $.ajax({
                    url: global_base_url + "login/ajax_check_login",
                    method: 'POST',
                    dataType: 'json',
                    data: {
                        formData: formData,
                        csrf: csrf
                    },
                    error: function() {
                        alert("An error occurred!");
                    },
                    success: function(response) {

                        // Login status [success|invalid]
                        var login_status = response.login_status;

                        // Form is fully completed, we will update the percentage
                        ccLogin.setPercentage(100);


                        // We will give some time for the animation to finish, then execute the following procedures    
                        setTimeout(function() {

                            // If login is invalid, remove the logging in class
                            if (login_status == 'invalid') {
                                $(".login-page").removeClass('logging-in');
                                ccLogin.resetProgressBar(true);
                            } else
                            if (login_status == 'success') {

                                // Redirect to login page
                                setTimeout(function() {

                                    // Post our form (causes the loop of re-validation)
                                    ccLogin.$container.submit();

                                }, 400);
                            }

                        }, 1000);
                    }
                });


            }, 650);
        }
    });

});

HTML of my form:

<form action="http://localhost:8888/login/pro" id="form_login" role="form" method="post" accept-charset="utf-8">
<input type="hidden" name="csrf" value="abc123" />                                                                
<div class="form-group">
   <div class="input-group">
      <div class="input-group-addon">
         <i class="entypo-user"></i>
      </div>
      <input type="text" class="form-control" name="email" id="email" placeholder="Username" autocomplete="off" />
   </div>
</div>
<div class="form-group">
   <div class="input-group">
      <div class="input-group-addon">
         <i class="entypo-key"></i>
      </div>
      <input type="password" class="form-control" name="pass" id="pass" placeholder="Password" autocomplete="off" />
   </div>
</div>
<div class="form-group">
   <button type="submit" class="btn btn-primary btn-block btn-login">
   <i class="entypo-login"></i>
   Login
   </button>
</div>

In short, upon clicking submit, the validation is triggered and I do an ajax call to /ajax_check_login. After the validation is completed, I am trying to post the form so the data goes to /pro. However, the jQuery submit just triggers the validation all over again and it gets stuck in this loop.

Is there a way to prevent this from validating the second time around and just submit it to the formAction specified?

Answer 1

This behaviour and its workaround is mentioned in documentation. Just instead ccLogin.$container.submit() do ev.submit()