jquery検証を使用して検証エラーが発生した場合の親divへのクラスの追加に関する私の回答から、この質問に対する既存の回答に価値が追加されると信じているため...
バリデーター設定へのアクセス
settingsビジネスの最初の順序は、フォームのバリデーターでオブジェクトを変更することです。これは、次のいずれかの方法で実行できます。
- を呼び出すことにより、フォームがすべてのフォームにロードされる前
jQuery.validator.setDefaults()
- オプションを渡してフォームを初期化する場合
.validate([options])
- フォーム上でバリデーターオブジェクトを見つけて初期化した後、
$("form").data("validator").settings
MVCを使用しているため、控えめな検証によってフォームが自動的に初期化されるため、オプション＃2は問題外です。それでは、今後オプション3を使用しましょう。ここでの目標は、フォームの設定をカスタマイズできるようにすることだけです。
デフォルトの動作を上書きする
変更するデフォルトのメソッドはhighlight、であり、無効なフィールドunhighlightを強調表示するか、強調表示オプションによって行われた変更を元に戻します。ソースコードによるデフォルトの動作は次のとおりです。
highlight: function( element, errorClass, validClass ) {
if ( element.type === "radio" ) {
this.findByName( element.name ).addClass( errorClass ).removeClass( validClass );
} else {
$( element ).addClass( errorClass ).removeClass( validClass );
}
},
unhighlight: function( element, errorClass, validClass ) {
if ( element.type === "radio" ) {
this.findByName( element.name ).removeClass( errorClass ).addClass( validClass );
} else {
$( element ).removeClass( errorClass ).addClass( validClass );
}
}
したがって、ここにもいくつかのオプションがあります。
- それらの関数を完全に置き換えて、自分で記述してください
- これらの関数をラップして通常のように呼び出しますが、前後に独自のカスタムコードを追加します。
オプション1-卸売りを交換
このルートはとても簡単です。そこに好きなものを書いてください。たぶんソースコードからシードするかもしれませんし、あなた自身のことをするかもしれません。
var valSettings = $("form").data("validator").settings
valSettings.highlight = function(element, errorClass, validClass) { ... }
valSettings.unhighlight = function(element, errorClass, validClass) { ... }
オプション2-ラップ関数
これは邪魔にならないので、ほとんどの場合おそらく好ましいでしょう。
最終的にはの値を置き換えるためvalSettings.highlight、元の関数のクリーンな元のバージョンにアクセスする必要があります。自分で保存するか、グローバルデフォルトから1つ取得することができます
// original highlight function
var highlightOriginal = $("form").data("validator").settings.highlight;
var highlightDefaults = $.validator.defaults.highlight
JavaScript関数のラッピングに関しては、ここ、ここ、およびここにいくつかの例があります）。これらの1つを解析した例を次に示します。これthisは、関数呼び出し間でコンテキストをバインドし、渡される引数のアリティを維持し、戻り値を保持するのに役立ちます。
function wrap(functionToWrap, beforeFunction) {
return function () {
var args = Array.prototype.slice.call(arguments),
beforeFunction.apply(this, args);
return functionToWrap.apply(this, args);
};
};
次に、呼び出しが行われるたびに起動する追加の動作をすばやく定義する必要もあります。divこの場合、要素に最も近い親を見つけて、次のようにクラスを更新しましょう。
function highlightDecorator(element, errorClass, validClass) {
$(element).closest("div").addClass(errorClass).removeClass(validClass);
}
それをすべてまとめる （私がそこで何をしたかを見てください）
$(function () {
var valSettings = $("form").data("validator").settings
valSettings.highlight = wrap($.validator.defaults.highlight, highlightDecorator)
valSettings.unhighlight = wrap($.validator.defaults.unhighlight, unhighlightDecorator)
});
function wrap(functionToWrap, beforeFunction) {
return function () {
var args = Array.prototype.slice.call(arguments);
beforeFunction.apply(this, args);
return functionToWrap.apply(this, args);
};
};
function highlightDecorator(element, errorClass, validClass) {
$(element).closest("div").addClass(errorClass).removeClass(validClass);
}
function unhighlightDecorator(element, errorClass, validClass) {
$(element).closest("div").addClass(validClass).removeClass(errorClass);
}
したがって、上記のすべての関数を組み合わせると、次のようになります。
$(function () {
var valSettings = $("form").data("validator").settings
valSettings.highlight = wrap($.validator.defaults.highlight, highlightDecorator)
valSettings.unhighlight = wrap($.validator.defaults.unhighlight, unhighlightDecorator)
});
function wrap(functionToWrap, beforeFunction) {
return function () {
var args = Array.prototype.slice.call(arguments);
beforeFunction.apply(this, args);
return functionToWrap.apply(this, args);
};
};
function highlightDecorator(element, errorClass, validClass) {
$(element).closest("div").addClass(errorClass).removeClass(validClass);
}
function unhighlightDecorator(element, errorClass, validClass) {
$(element).closest("div").addClass(validClass).removeClass(errorClass);
}
input.input-validation-error {
border: solid 1px red;
}
.input-validation-error label {
color: red;
}
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validation-unobtrusive/3.2.6/jquery.validate.unobtrusive.min.js"></script>
<form action="/Person" method="post">
<div class="required">
<label for="Name">Name <em>*</em></label>
<input id="Name" name="Name" type="text" value=""
data-val="true" data-val-required="The Name field is required."/>
<span class="field-validation-valid"
data-valmsg-for="Name" data-valmsg-replace="true"></span>
</div>
<input type="submit" value="Save" />
</form>