如果使用 jquery 验证发生验证错误，则从我对将类添加到父 div 的回答中，因为我相信它为这个问题的现有答案增加了价值......
访问验证器设置
首要任务是修改settings表单验证器上的对象。您可以通过以下任何方式执行此操作：
- 在通过调用为所有表单加载表单之前
jQuery.validator.setDefaults()
- 通过传入选项初始化表单时
.validate([options])
- 通过在表单上定位验证器对象进行初始化后
$("form").data("validator").settings
由于您使用的是 MVC，因此选项 #2 是不可能的，因为unobtrusive-validation将自动初始化表单。所以让我们继续使用选项 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，因此您需要访问原始函数的干净原始版本。您可以保存自己的或从全局默认值中获取一个
// original highlight function
var highlightOriginal = $("form").data("validator").settings.highlight;
var highlightDefaults = $.validator.defaults.highlight
在包装 JavaScript 函数方面，这里有几个例子，这里和这里）。这是其中之一的解析示例，这将有助于跨函数调用绑定上下文，保留传递的参数的数量，并保留返回值：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>