ここで問題です。Jörn Zaefferer による jQuery Validation プラグインを使用して検証されているフォームがあります。リモート検証という1つのコンポーネントを除いて、検証は正常に機能しています。実際、リモート検証は機能しますが、意図したとおりには機能しません。ユーザー名入力にデータを入力して「フォーカスアウト」すると、サーバー上でデータが検証され、ユーザー名の可用性に応じて、サーバーは文字列 true または false で応答します。ここで、クライアント側では、検証プラグインがサーバーからの応答に基づいて入力要素に「エラー」または「有効」クラスを追加することを期待しています。プラグインは、サーバーから偽の応答文字列を受信すると「エラー」クラスを追加しますが、真の応答文字列を受信すると「有効な」クラスを追加できません。
ユーザー名入力内をクリックして 2 回目に焦点を合わせると、ミステリーに追加されます。有効なクラスが追加されます。注意すべき点: 入力フィールドのデータが変更されていないため、リモート Ajax 検証は 2 回目のフォーカスアウトでは実行されません。プラグインは、サーバーから受信した最後の応答 (私が思うに) に基づいてクラスを追加するだけです。変。
最初は、非同期 Ajax が原因ではないかと考えていました。しかし、私はそれを同期に変更しました。問題が解決しませんでした。Firebug コンソールでサーバーからの応答を徹底的に確認しました。そして、応答として「true」または「false」の文字列 (引用符なし) を確認できます。
errorLabelContainer も追加して (必須ではありませんが)、何かを受信しているかどうかを確認しました。ここでも、エラーが発生した場合、errorLabelContainer セレクターはエラー メッセージを受け取りますが、成功した場合は空白のままになります。
ユーザーに視覚的に示すために CSS の入力背景を変更するために使用するため、有効なクラスを設定する必要があります。
私が持っている検証コードは次のとおりです。
$('.registration-form').validate({
debug : true,
onkeyup : false,
errorLabelContainer: '.message-box',
onfocusout : function(element) { var isvalid = $(element).valid(); console.log(isvalid); },
rules : { username : { required: true, alphanumeric: true, minlength: 3, remote: { url : ajaxVars.ajaxurl,
type :'POST',
async : false,
cache : false,
timeout : 5000,
data : { action: 'check_username',
username: function() { return $('input[name="username"]').val(); },
_ajax_nonce: ajaxVars._ajax_nonce
}
}
},
email : { required: true, email: true, remote: { url : ajaxVars.ajaxurl,
type :'POST',
async : false,
cache : false,
timeout : 5000,
data : { action: 'check_email',
email: function() { return $('input[name="email"]').val(); },
_ajax_nonce: ajaxVars._ajax_nonce
}
}
},
password : { required: true, minlength: 5 },
}, // end rules
messages : { username : { required : 'Please enter a username.',
alphanumeric : 'Your username must be atleast 3 characters long and must only include alphabets, numbers or an underscore.',
minlength : 'Your username must be atleast 3 characters long and must only include alphabets, numbers or an underscore.',
remote : 'This username is already taken!'
},
email : { required : 'Please enter an email address.',
email : 'Please enter a valid email address.',
remote : 'This email is already registered!'
},
password : 'Please provide a password for your new account. The password must be atleast 5 characters long.',
}, // end messages
submitHandler : function(form) {
$(form).ajaxSubmit({
success : show_reg_response,
url : ajaxVars.ajaxurl,
type : 'POST',
timeout : 10000,
clearForm : true,
resetForm : true
});
} // end submitHandler
});