jQuery Validate – 有条件地突出显示输入父级

Question

我有一个自定义样式 select，我需要将错误 [=21=] 附加到它的包装器，所以我这样做了：

$('form').validate({
    ignore: [],
    errorPlacement: function(error, element) {
        if (element.attr('name') === 'state') {
            error.insertAfter('.select-wrap');
        } else {
            error.insertAfter(element);
        }
    },
    highlight: function(element) {
        if (element.type === 'select') {
            $(element).parent('.select-wrap').addClass('error');
        } else {
            $(element).addClass('error');
        }
    },
    unhighlight: function(element) {
        if (element.type === 'select') {
            $(element).parent('.select-wrap').removeClass('error');
        } else {
            $(element).removeClass('error');
        }
    }
});

这让我的错误标签出现在正确的位置，但它仍然将错误 [=21=] 添加到 select 元素，而不是其父元素。

如果我将 highlight/unhighlight 函数的 if (element.type === 'select') 更改为 if (element.attr('name') === 'select')，则验证根本无法触发。 :?

Answer 1

问题似乎是，当你说 element.type 它返回 select-one 所以你的比较 element.type === 'select' 失败了。

您可以使用 element.tagName === 'SELECT' 或 $(element).is('select')

$('form').validate({
    ignore: [],
    errorPlacement: function (error, element) {
        if (element.attr('name') === 'state') {
            error.insertAfter('.select-wrap');
            error.removeClass('error')
        } else {
            error.insertAfter(element);
        }
    },
    highlight: function (element) {
        console.log(element, element.type, element.tagName)
        if ($(element).is('select')) {
            $(element).parent('.select-wrap').addClass('error');
        } else {
            $(element).addClass('error');
        }
    },
    unhighlight: function (element) {
        if ($(element).is('select')) {
            $(element).parent('.select-wrap').removeClass('error');
        } else {
            $(element).removeClass('error');
        }
    }
});

演示：Fiddle

HTMLSelectElement.type

The HTMLSelectElement.type read-only property returns the form control's type. The possible values are:

"select-multiple" if multiple values can be selected.

"select-one" if only one value can be selected.

jQuery Validate – 有条件地突出显示输入父级

jQuery Validate – conditionally highlighting input parent

jquery

jquery-validate