javascript - 带有复选框和收音机的 JQuery 验证插件问题

Question

当输入或选择字段发生验证错误时，插件会将错误类添加到其中，因此在 css 中我可以有类似的内容：

.error { border: 2px solid red; }

但这不适用于复选框和收音机，因为某些浏览器不允许对这些类型的元素进行样式设置。因此，对于这两种类型的元素，我希望包含它们的类的 divblock被赋予错误类。所以它看起来像这样的错误：

<div class="block error">
    <input type="checkbox" name="something" class="error" /> Something
</div>

如何扩展插件来实现这一点？

伪代码：

$.validator.addClassRules('checkboxOrRadioError', {
   onError: function() {
       $(this).parents('.block').addClass('error');
   }
});

Answer 1

您可以使用errorPlacement回调来覆盖错误的默认位置或将highlight回调与unhighlight. 您现在可以控制发生的事情，但必须编写所有条件

例子：

$('form').validate(function() {

    highlight: function(element, errorClass) {
        var $el = $(element);
        if ($el.is(':radio') || $el.is(':checkbox')) {
            $el.closest('.block').addClass(errorClass)

        } else { 
                /* add code for default*/
        }

    },

    unhighlight: function(element, errorClass) { 
                /* code to reverse the above*/
    }
})​