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

Question

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

HTML:

<div class="left-aligned indent">

    <label id="id_label" for="id" class="label">Items:</label>

    <div class="select-group">

        <input type="checkbox" name="items" value="1" id="item_1" />
        <label class="checkbox">Item #1</label><br />

        <input type="checkbox" name="items" value="1" id="item_2" />
        <label class="checkbox">Item #2</label><br />

        <input type="checkbox" name="items" value="1" id="item_3" />
        <label class="checkbox">Item #3</label><br />

    </div>

</div>

使用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

这应该工作:

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

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

• http://jqueryvalidation.org/validate/

Answer 2

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

Answer 3

从我在使用jquery验证发生验证错误时将类添加到父div的答案,因为我相信它为这个问题的现有答案增加了价值......

访问验证器设置

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

1. 在通过调用为所有表单加载表单之前 jQuery.validator.setDefaults()
2. 通过传入选项初始化表单时 .validate([options])
3. 通过在表单上找到验证器对象进行初始化后 $("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. 完全替换这些功能并自行编写
2. 包装这些功能并像平常一样调用它们,但在之前或之后添加您自己的自定义代码.

选项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跨函数调用绑定上下文,保留传递的参数的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;
}

<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>