非同期で実行できます。
グローバル変数を作成します。私はこれを 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 応答が最後に、または気が向いたときに返されることがわかります。
そのため、フォームが送信される前に検証関数が正しい Ajax
結果を待機するように
するには、submitHandler とグローバル フラグが必要です。
Ajax 応答からの画面への出力は、success 関数や error 関数などの Ajax 関数で行う必要があります。
検証関数の成功/エラー関数と同じ場所に書き込む必要があります。
このようにして、Ajax エラー メッセージは検証関数のエラー関数と調和します。
この概念は少しトリッキーに思えるかもしれません。
覚えておくべきことは、validate 関数の success 関数と error 関数は、Ajax 呼び出しの success 関数と error 関数と同じ場所に書き込んでいるということです。
エラー メッセージの場所は、ユーザーが入力を入力した場所のすぐ隣にあります。これにより、あなたが求めている素晴らしいユーザー エクスペリエンスが生まれます。
これが私のコードサンプルです。単純化しました。
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>
これがあなたの質問に答えることを願っています。