Bạn có thể làm điều đó một cách không đồng bộ.
Tạo biến toàn cầu, tôi gọi nó là ajax_done_and_successful_flag, mà bạn khởi tạo sai ở đầu chương trình . Bạn sẽ đặt giá trị này thành true hoặc false tại các địa điểm khác nhau trong các hàm Ajax của bạn, chẳng hạn như thành công Ajax của bạn hoặc chức năng lỗi Ajax của bạn.
Sau đó, bạn cần thêm trình xử lý gửi ở cuối chức năng xác thực của bạn.
submitHandler: function(form) {
if (ajax_done_and_successful_flag === true) {
form.submit()
}
}
Vấn đề là mã không thực thi theo cách tuyến tính.
Đặt một loạt các câu lệnh console.log của Firebug trong mã của bạn.
Quan sát chuỗi thực thi. Bạn sẽ thấy rằng phản hồi của bạn
Ajax sẽ trở lại sau cùng hoặc bất cứ khi nào nó cảm thấy như vậy.
Đó là lý do tại sao bạn cần trình xử lý VÀ cờ toàn cầu
để buộc chức năng xác thực phải đợi cho đúng kết quả Ajax
trước khi gửi biểu mẫu.
Mọi đầu ra cho màn hình từ phản hồi Ajax, cần được thực hiện trong các chức năng Ajax , chẳng hạn như chức năng thành công và chức năng lỗi .
Bạn cần phải viết thư đến cùng một vị trí làm chức năng lỗi/thành công của hàm xác thực.
Bằng cách này, các thông báo lỗi Ajax hòa trộn với hàm lỗi của hàm xác thực.
Khái niệm này có vẻ hơi phức tạp.
Ý tưởng giữ trong ý tưởng là các hàm thành công và lỗi trong hàm xác thực được ghi đến cùng một vị trí thành công và lỗi các chức năng trong cuộc gọi Ajax, và đó là không sao, đó là cách được.
Vị trí của thông báo lỗi của tôi nằm ngay bên cạnh nơi người dùng nhập . Điều này tạo ra trải nghiệm người dùng tốt đẹp mà tôi nghĩ rằng bạn đang yêu cầu.
Đây là mẫu mã của tôi. Tôi đã đơn giản hóa nó.
Tôi đang chạy jQuery-1.7.1
và jQuery xác nhận plug-in 1,6
Tôi đang sử dụng Firefox 14.0.1 và tôi cũng đã cố gắng nó trên Chrome 21.0 thành công.
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 là vị trí ngay bên cạnh đầu vào văn bản. Đây là mẫu mã đơn giản của biểu mẫu.
<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>
Tôi hy vọng điều này sẽ trả lời câu hỏi của bạn.
Bạn đã sử dụng giải pháp nào? Tôi đang đối mặt với cùng một vấn đề. –