您可以异步执行此操作。
创建一个全局变量，我称之为 ajax_done_and_successful_flag，您在程序开始时将其初始化为 false。您将在 Ajax 函数（例如 Ajax 成功函数或 Ajax 错误函数）的各个位置将其设置为 true 或 false。
然后您需要在验证函数的底部添加一个提交处理程序。
submitHandler: function(form) {
if (ajax_done_and_successful_flag === true) {
form.submit()
}
}
问题是代码没有以线性方式执行。
在您的代码中放置一堆 Firebug 的 console.log 语句。
观察执行顺序。您将看到您的
Ajax 响应将最后返回，或者任何时候都返回。
这就是为什么您需要 submitHandler 和全局标志来强制验证函数
在提交表单之前
等待正确的 Ajax结果。
任何从 Ajax 响应到屏幕的输出，都需要在 Ajax 函数中完成，例如成功函数和错误函数。
您需要写入与验证函数的成功/错误函数相同的位置。
通过这种方式，Ajax 错误消息与 validate 函数的错误函数融合在一起。
这个概念可能看起来有点棘手。
要记住的想法是，验证函数中的成功和错误函数与 Ajax 调用中的成功和错误函数写入相同的位置，这没关系，应该是这样。
我的错误消息的位置就在用户键入输入的位置旁边。这创造了我认为您所要求的良好用户体验。
这是我的代码示例。我简化了它。
我正在运行 jQuery-1.7.1
和 jQuery 验证插件 1.6
我正在使用 Firefox 14.0.1，我也在 Chrome 21.0 上成功尝试过。
var ajax_done_and_successful_flag = false;
// Add methods
...
$.validator.addMethod("USERNAME_NOT_DUPLICATE", function (value, element) {
return this.optional(element) || validate_username_not_duplicate( );
},
"Duplicate user name.");
// validate
$(document).ready(function ( ) {
$('#register_entry_form form').validate({
rules: {
username: {
required: true,
minlength: 2,
maxlength: 20,
USERNAME_PATTERN: true,
USERNAME_NOT_DUPLICATE: true
},
...
errorPlacement: function (error, element) {
element.closest("div").find(".reg_entry_error").html(error);
},
success: function(label) {
label.text('Success!');
} ,
submitHandler: function(form) {
if (ajax_done_and_successful_flag === true ) {
form.submit();
}
}
});
});
/* validation functions*/
function validate_username_not_duplicate() {
var username_value = $('#username').val(); // whatever is typed in
$.ajax({
url: "check_duplicate_username.php",
type: "POST",
data: { username: username_value },
dataType: "text",
cache: false,
//async: false,
timeout: 5000,
error: function (jqXHR, errorType, errorMessage) {
ajax_done_and_successful_flag = false;
if ( errorType === "timeout" ) {
$('#username').closest("div").find(".reg_entry_error").html("Server timeout, try again later" );
} else if ...
},
success: function (retString, textStatus,jqXRH) {
if ( retString === "yes") { // duplicate name
// output message next to input field
$('#username').closest("div").find(".reg_entry_error").html("Name already taken.");
ajax_done_and_successful_flag = false;
} else if ( retString === "no") { // name is okay
// output message next to input field
$('#username').closest("div").find(".reg_entry_error").html("success!");
ajax_done_and_successful_flag = true;
} else {
console.log("in validate_username_duplicate func, success function, string returned was not yes or no." );
$('#username').closest("div").find(".reg_entry_error").html("There are server problems. Try again later.");
ajax_done_and_successful_flag = false;
}
} // end success function
}); // end ajax call
return true; // automatically return true, the true/false is handled in
// the server side program and then the submit handler
}
reg_entry_error 是文本输入旁边的位置。这是表单的简化代码示例。
<label class="reg_entry_label" for="username">Username</label>
<input class="reg_entry_input" type="text" name="username" id="username" value="" />
<span class="reg_entry_error" id="usernameError" ></span>
我希望这回答了你的问题。