[英]jQuery Validate - Add Error Class to Parent Div
我正在使用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;
}
这应该工作:
$('#myform').validate({
highlight: function(element) {
$(element).parent().addClass("field-error");
},
unhighlight: function(element) {
$(element).parent().removeClass("field-error");
}
});
查看文档以获取更多选项:
$(element).parent('div').addClass('checkbox-error');
从我在使用jquery验证发生验证错误时将类添加到父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 );
}
}
所以你在这里也有几个选择。
这条路很容易。 只要在那里写下你想要的任何东西。 也许来自源代码的种子,也许做自己的事情。
var valSettings = $("form").data("validator").settings
valSettings.highlight = function(element, errorClass, validClass) { ... }
valSettings.unhighlight = function(element, errorClass, validClass) { ... }
这种侵入性较小,因此在大多数情况下可能更为可取。
由于最终您将替换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);
}
因此,当我们结合所有上述函数时,它应该看起来像这样:
$(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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.