jquery 検証使用ガイド ステップ 4_jquery

デフォルトでは、label要素を使用して検証プロンプト情報が表示され、cssクラスを追加することで、エラー制御やエラーメッセージの表示方法を簡単に設定できます。

/* 入力コントロールの検証エラー*/
form input.error { border:solid 1px red;}

/* 検証エラー メッセージ*/
form label.error { width: 200px; margin-left: 10px; color: Red;}

表示方法をカスタマイズしたい場合は、jquery.validate のデフォルトの表示方法を変更できます。

デフォルトでは、 label はエラー メッセージを表示するために使用され、errorElement 属性を通じて変更できます。
errorElement: エラー メッセージの html タグ

$(".selector").validate
errorElement: "em"
})

エラー メッセージの外側でレイヤーを他の要素でラップすることができます。
wrapper: エラー メッセージの外側のカプセル化 HTML タグ

$(".selector").validate({
wrapper: "li"
})

検証 エラーのデフォルトの CSS クラスは error で、errorClass を通じて変更できます。
errorClass: エラーの検証時に使用される CSS クラス

$(".selector").validate({
errorClass: "invalid"
})

検証が成功したときのアクションもカスタマイズします
成功: 値が文字列の場合は CSS クラスとして扱われ、関数の場合は、関数が実行されます

$(".selector").validate({
success: "valid"
})

または

success: function (label) {
label.html (" ").addClass("checked");
}

エラー メッセージを 1 つのコンテナに統合して表示することもできます
errorLabelContainer: Unify errorメッセージを 1 つのコンテナにまとめて表示します

$("#myform").validate({
errorLabelContainer: "#messageBox"
})

デフォルトでは、エラー メッセージは次のとおりです。 validation要素の後に配置され、エラーはカスタマイズ可能 メッセージの表示位置

$(".selector").validate({
errorPlacement: function(error, element) {
error.appendTo( element.parent("td").next ("td") );
}
})

さらに、複数のエラー情報を配置するグループを定義できます。を 1 か所に配置し、エラー配置コントロールを使用してエラー情報を配置します。
groups: グループを定義します

$(".selector").validate({
groups: {
ユーザー名: "fname lname"
},
errorPlacement: function(error, element) {
if (element.attr("name") == "fname" || element.attr("name" ) == "lname" )
error.insertAfter( "#lastname");
else
error.insertAfter(element)
}
})

ハイライト
highlight: ハイライト、デフォルトは errorClass の追加です
unhighlight: ハイライト、アンチハイライトに対応します

$(".selector").validate({
highlight: function(element) , errorClass) {
$(element) .addClass(errorClass);
$(element.form).find("label[for=" element.id "]").addClass(errorClass); >},
unhighlight: function(element , errorClass) {
$(element).removeClass(errorClass);
$(element.form).find("label[for=" element.id " ]").removeClass(errorClass);
}
});


または、エラー表示を完全にカスタマイズできます
showErrors: エラー表示ハンドルを取得します

$(".selector").validate( {
showErrors: function(errorMap, errorList) {
$("#summary").html("フォームには this.numberOfInvalids()
" エラー。詳細は以下を参照してください。");
this.defaultShowErrors()
}
})