我正在使用jQuery验证来检查登录表单。它执行基本输入检查,然后运行AJAX调用以查看登录详细信息是否有效。
收到此来电的成功回复后,我正在尝试将表单posts
提交到我在HTML中指定的网址。
我的问题是,当这个表单发布时,它会卡在验证循环中并尝试每次验证它。
$(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:
<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>
简而言之,点击提交后,会触发验证,并对/ajax_check_login
进行ajax调用。验证完成后,我正在尝试发布表单,以便数据转到/pro
。但是,jQuery submit
只会再次触发验证,并且会在此循环中停滞不前。
有没有办法阻止它第二次验证并将其提交到指定的formAction
?