Question

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

.error { border: 2px solid red; }

但由于某些浏览器不允许对这些类型的元素进行样式设置，因此这对复选框和无线电不起作用。因此，对于这两种类型的元素，我希望包含它们的类block的div被赋予错误类。所以它会出现错误：

<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*/
    }
})

带有复选框和无线电的JQuery验证插件问题

1 个答案: