JavaScript验证代码- https://freedigitalphotos.net/images/js/judd-validate.js
我们有一些新的表单在我们的网站有客户端JavaScript验证。
当用户从表单字段"散焦"时触发验证。验证是AJAX(检查数据库是否有有效的用户名等)和JavaScript(检查字段是否为空,或包含期望的数据)的组合。
用户必须单击两次表单提交按钮才能发送表单。似乎第一次点击触发了字段验证,但没有提交表单。第二次单击成功完成表单。
去- https://freedigitalphotos.net/images/recover_password.php在电子邮件字段中输入arifkpi@gmail.com,然后立即点击提交。再次注意,第一次单击仅验证输入,使用AJAX检查数据库中的电子邮件地址。需要第二次点击。
我想修复这个,所以一切都将工作与一个单一的点击
而不是调用Ajax验证的focustout
事件,你可以调用它的click
的按钮,如果Ajax返回真结果然后submit
形式编程。参考一些示例代码行:
<form method="post" id="registration_form" name="registration_form" action="register.php">
EmailId: <input type="text" id="email_id" name="email_id">
<label class="error" for="username" id="globalErrorUsername"></label>
Username: <input type="text" id="username" name="username">
<label class="error" id="globalErrorEmail"></label>
<button type="button" id="register_btn" name="register_btn">Register</button>
</form>
Js的部分:
$("#register_btn").click(function() {
//.valid function is useful when you are using jquery Validate library for other field validation
if ($('#registration_form').valid()) {
var email_id = $('#registration_form').find('#email_id').val(),
username = $('#registration_form').find('#username').val();
$.ajax({
beforeSend: function() {
$('#globalErrorUsername').html('');
$('#globalErrorEmail').html('');
}, //Show spinner
complete: function() { },
type : 'post',
url : 'check-user-existence.php',
dataType :'json',
data : 'email_id=' + email_id + '&username=' + username,
success:function(response) {
if(response.success == 1) {
//submit the form here
$("#registration_form").submit();
} else if (response.error == 1) {
if(response.details.username != undefined) {
$('#globalErrorUsername').show();
$('#globalErrorUsername').html(response.details.username);
}
if(response.details.email_id != undefined) {
$('#globalErrorEmail').show();
$('#globalErrorEmail').html(response.details.email_id);
$('#email_id').focus();
} else {
$('#username').focus();
}
}
}
});
} else {
return false;
}
return false;
});