以下是我对使用jquery validation验证发生错误时添加类到父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的值，因此需要访问干净而原始的函数版本。您可以保存自己的版本，也可以从全局默认设置中获取一个版本。
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>
$(error).parent('div').addClass('error');，如果成功了请告诉我。 - gdoron