jquery - 在 jQuery 验证插件的错误模板中插入元素

Question

我正在使用 jQuery Validation plugin对于我的表格。它允许您更改 errorElement 并使用 wrapper 选项包装 errorElement。但是，我想在 errorElement 中插入一个元素，如下所示:

<label class="error"><em></em>Error message goes here</label>

是否有一种简单的方法可以完成插入 em 标记？

我尝试使用 errorPlacement 选项在前面添加 em 标记(见下文)，但插件似乎随后替换了 errorElement 的内容。

$.validator.setDefaults({
    errorPlacement: function(error, element) {
        error.prepend('<em/>');
        error.insertBefore(element);
    }
});

我还尝试使用 showErrors 选项在前面添加 em 标记(见下文)。同样，插件似乎随后替换了 errorElement 的内容。

$.validator.setDefaults({
    showErrors: function(errorMap, errorList) {
        for (var i = 0; i < errorList.length; i++) {
            var error = errorList[i],
                $label = this.errorsFor(error.element),
                $element = $(error.element);

            if ($label.length && $label.find('em').length == 0) {
                $label.prepend('<em/>');
            }
        }

        this.defaultShowErrors();
    }
});

我还尝试修改插件，以便在生成错误元素时，在前面添加 标记。直到我关注有错误的表单元素，然后删除 em 标记为止，这种方法才起作用。 (这样做是因为当我在字段中聚焦和/或键入时，jQuery 验证会不断更新错误元素的内容，因此会删除在创建错误元素时添加的 em 标记。)

Answer 1

您可以使用 showErrors 函数来自定义错误的显示方式:

$.validator.setDefaults({
    showErrors: function(errorMap, errorList) {
        if (errorList.length < 1) {
            // clear the error if validation succeeded
            $('label.error').remove();
            return;
        }
        $.each(errorList, function(index, error) {
            $(error.element).next('label.error').remove();
            $(error.element).after(
                $('<label/>')
                    .addClass('error')
                    .append($('<em/>').text('this is some em'))
                    .append(error.message)
            );
        });
    }
});    

您可以see it in action here .