Question

我正在使用jQuery Validation plugin表单。它允许您更改 errorElement 并使用包装器选项包装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(); } });

我也尝试修改插件，以便在生成错误元素时，＆lt; em＆gt;标签是前置的。这有效，直到我专注于一个有错误的表单元素，之后删除了 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。

Answer 2

我试过Darin的解决方案，但面临两个问题：

使用多个字段时，如果字段生效，则无法正确删除错误消息。
我无法使用success回调将错误标签更改为“确定”标签

我最终得到以下代码，在使用defaultShowErrors调用默认行为之前修改错误消息

$('#my_form').validate({
    showErrors: function(errorMap, errorList) {
    var i, elements;
    for(i = 0; errorList[i]; i++) {
        errorList[i].message = "<em> " + errorList[i].message + "</em>"
    }
    this.defaultShowErrors()    
    }
});

Answer 3

我实际上是通过修改插件解决了这个问题，但是会接受任何（有效的）解决方案，不需要修改它。

我所做的是在插件中添加两个新选项 appendToError 和 prependToError 。无论在这些选项中指定的是什么，都将始终附加或附加在错误元素中。

https://github.com/simshaun/jquery-validation/commit/bff7ba55d1d60ee0bac033989256a932185e7a97

（在了解了插件的内部工作原理之后，我认为没有任何可能的方法可以在不修改它的情况下做我想做的事情，而不是实现效率极低的事情。）

在jQuery Validation插件错误模板中插入元素

3 个答案: