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?
