jQuery Validate – 将错误类添加到Parent Div

我正在使用jQuery Validate插件，并且永远找不到显示复选框错误的好方法。 如果没有选中，我想以红色突出显示所有复选框标签，并决定通过向包含复选框和复选框标签的div添加错误类来执行此操作。 但是，它似乎没有添加类。 我没有正确选择div吗？

HTML：

 Items: 
  Item #1
  Item #2
  Item #3
 
  

使用Javascript：

 $().ready(function() { $('#addForm').validate({ rules: { "items": { required: true, minlength: 1 } }, errorPlacement: function(error, element) { if (element.is(':checkbox')) { $(this).prev("div").addClass('checkbox-error'); } else { return true; } } }); }); 

CSS：

 .error { background-color: #FF898D; border: 1px solid #000; } .checkbox-error { color: #FF898D; } 

Answer 1

 $(element).parent('div').addClass('checkbox-error'); 

Answer 2

这应该工作：

  $('#myform').validate({ highlight: function(element) { $(element).parent().addClass("field-error"); }, unhighlight: function(element) { $(element).parent().removeClass("field-error"); } }); 

查看文档以获取更多选项：

• http://jqueryvalidation.org/validate/

Answer 3

从我在使用jqueryvalidation发生validation错误时将类添加到父div的答案，因为我相信它为这个问题的现有答案增加了价值……

访问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 *