Question

我有以下jQuery验证码：

$('form').validate({
    errorElementClass: 'input-validation-error',
    errorClass: 'field-validation-error',
    errorPlacement: function (error, element) {
        error.html('<i class="icon-warning"></i> ' + error.text()).insertAfter(element);
    }
});

在我的页面上出现错误的每个元素之后应该插入我的自定义错误消息html。但是，我发现插件并不喜欢这样，而是覆盖了我想要放在HTML中的任何内容，只包含错误消息本身并删除了

我该怎么办？

Answer 1

默认情况下，插件会根据the errorElement option插入包含错误消息的<label>元素，然后根据需要切换此<label>元素。如果您的代码有效，它将覆盖此errorElement，并且该插件将无法再查找和切换消息。

“我怎么能阻止这个？”

你做不到。开发人员不提供将任何标记添加到验证消息元素中包含的纯文本的直接选项或方法。

但是，有两种解决方法可以实现所需的标记：

ONE：您可以设置包含已附加的自定义消息。

$('form').validate({
    errorElementClass: 'input-validation-error',
    errorClass: 'field-validation-error',
    rules: {
        foo: {
            required: true
        },
        bar: {
            required: true
        }
    },
    messages: {
        foo: {
            required: "<i class='icon-warning'></i> This field is required"
        },
        bar: {
            required: "<i class='icon-warning'></i> This field is required"
        }
    },
    ....

如果您的表单包含大量字段和规则，则此解决方案非常繁琐。

概念证明DEMO 1：jsfiddle.net/g4zq7p8j/

You could also use jQuery .extend() to change all the default messages at once

TWO：否则，请手动将元素放入标记中，并在CSS中将其设置为display: none。

<input type="text" name="foo" /><i class="icon-warning"></i>

然后，您可以使用highlight和unhighlight回调选项切换这些元素以及相关的错误消息。

$('form').validate({
    errorElementClass: 'input-validation-error',
    errorClass: 'field-validation-error',
    errorPlacement: function(error, element) {
        error.insertAfter($(element).next('i'));
    },
    highlight: function(element, errorClass, validClass) {
        .... // default highlight code here
        $(element).next('i').show();
    },
    unhighlight: function(element, errorClass, validClass) {
        .... // default unhighlight code here
        $(element).next('i').hide();
    },
    ....

概念证明DEMO 2：jsfiddle.net/kxmw9do2/

You could also easily have jQuery insert these elements dynamically on page load

$(document).ready(function() {

    $('<i class="icon-warning"></i>').insertAfter('[type="text"]');

    ....

jQuery验证不使用errorPlacement HTML

1 个答案: