jQuery Validate を使用して、内容がわからないフォームを検証し、ページの上部に概要を表示しようとしています。各フィールドの横にメッセージを表示したくありません。onsubmit で正常に動作するようになりました。onfocusout/onblur/onkeyup を無効にすると、すべて正常に動作します。現時点では、showErrors を通じてこれを実行しようとしていますが、私は心を開いています。
jQuery Validate は、onblur または keyup を起動したときに失敗した単一の要素のみを戻すという印象を受けています。現在起こっていることは、サマリーが毎回上書きされ、onblur を起動すると、サマリーが空に戻る可能性があることです (おそらく errorMap には失敗した要素が 1 つしか含まれていないためです)。私が望むのは、ユーザーがフォームを移動しても正しい要約が維持されるように、要約を更新または再生成することです。
バリデーターへの参照を保存してから、validator.errors() または .elements() をループする必要があるかもしれないと思いますが、そのアプローチのどこに行くべきかわかりません。クリックされた送信ボタンから呼び出される、validateform() 関数全体を以下に示します。
function validateform() {
$("form").validate({
showErrors: function(errorMap, errorList) {
var errorCount = this.numberOfInvalids();
if (errorCount > 0) {
if (errorCount == 1) {
$("#errorContainer h3").html("Your form contains " + errorCount + " error, see details below.");
}
else { /*two or more errors */
$("#errorContainer h3").html("Your form contains " + errorCount + " errors, see details below.");
}
var summary = '';
$.each(errorMap, function(key, value) {
var field = $('input[name="' + key + '"],select[name="' + key + '"],textarea[name="' + key + '"]');
field.addClass('err');
var fieldname = field.attr("rel");
summary += '<p><span class="errorkey">' + fieldname + '</span> - <span class="errorvalue">' + value + "</span></p>";
});
$('#errorList').html(summary);
$('#errorContainer').slideDown();
}
},
onfocusout: false,
onkeyup: false,
onclick: false
});
}