如果使用jqueryvalidation发生validation错误，则将类添加到父div

我的输入字段有以下标记：

 Name * 
 @Html.TextBoxFor(m => m.Name) @Html.ValidationMessageFor(m => m.Name) 
  

如果发生错误，则使用jqueryvalidation插件，然后它将在输入下方添加一个span，并将一个类应用于输入本身，以便可以设置错误样式。 我还想做的是用一个必需的类向父div添加一个类。 因此，例如，如果发生错误，它将是

，然后在修复

，与应用于字段的类相关并删除错误范围。

我该怎么办？ 我查看了文档站点，但没有看到任何与向父div添加类有关的内容。

我虽然做了类似的事情：

 if ($('input').hasClass('valid')) { $(this).parents('div.required').addClass('valid'); } else if ($('input').hasClass('input-validation-error')) { $(this).parents('div.required').addClass('error'); } 

但是如何通过validation运行它序列？ 就像发生错误或字段变为有效时一样。

Answer 1

我根本没玩过这个，但你可以使用jQuery Validate Hooks

Answer 2

访问validation器设置

第一项业务是修改表单validation器上的settings对象。 您可以通过以下任何方式执行此操作：

1. 通过调用jQuery.validator.setDefaults()为所有表单加载表单之前
2. 通过在.validate([options])入选项来初始化表单时
3. 初始化之后，通过使用$("form").data("validator").settings上的validation器对象

由于您使用的是MVC，选项＃2是不可能的，因为不显眼的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. 完全替换这些function并自行编写
2. 包装这些function并像平常一样调用它们，但在之前或之后添加您自己的自定义代码。

选项1 – 替换批发

这条路很容易。 只要在那里写下你想要的任何东西。 也许来自源代码的种子，也许做自己的事情。

 var valSettings = $("form").data("validator").settings valSettings.highlight = function(element, errorClass, validClass) { ... } valSettings.unhighlight = function(element, errorClass, validClass) { ... } 

选项2 – 包裹function

这种侵入性较小，因此在大多数情况下可能更为可取。

由于最终您将替换valSettings.highlight的值， valSettings.highlight您需要访问原始函数的干净原始版本。 您可以保存自己的或从全局默认值中获取一个

 // original highlight function var highlightOriginal = $("form").data("validator").settings.highlight; var highlightDefaults = $.validator.defaults.highlight 

在包装JavaScript函数方面，这里有几个例子， 这里和这里 ）。 以下是其中一个示例的解析示例，它将帮助跨函数调用绑定this上下文，保留传递的参数的arity，并保留返回值：

 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); } 

因此，当我们结合所有上述函数时，它应该看起来像这样：

Stack Snippets和jsFiddle中的工作演示

 $(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; } 

    
 
 Name *