需要将 HTML 放入 jQuery 验证插件的错误标签容器中

Question

我对我的输入元素进行了简单验证：

$("#forma").validate({
    errorClass: "red"
});
$("#input").each(function(index, elem) {
    var rules = {
        required:true
    };
    $(elem).rules("add", rules);
});

因此，当发生错误时 - 显示错误消息，并且这些错误消息位于标签元素内。例如，如果您忘记输入姓氏并单击提交按钮 - 将添加此标签元素：

<label id="lastname-error" class="red" for="lastname">This field is required.</label>

现在，我想在这些标签内添加空的 span 元素，在开头 (prependTo) 背景图像和其他 CSS 属性，所以它看起来像这样:

<label id="lastname-error" class="red" for="lastname"><span class="myspan"></span><This field is required.</label>

我想这可以通过某些事件来完成，例如：发生错误时 - 执行此操作：

var html = "<span></span>";
$(html).css({
    "background-image": "url('../images/arrowRight.png')",
    "padding-right": "26px",
    "background-repeat: no-repeat"
}).prependTo("label.red");

你知道我该怎么做吗？

Answer 1

期望的输出：

<label id="lastname-error" class="red" for="lastname"><span class="myspan"></span><This field is required.</label>

"I guess that this can be done by some event"

不，您不需要使用自定义事件或函数。您只需使用 the plugin's errorPlacement option 来构造您的自定义 HTML.

默认密码是error.insertAfter(element)，所以只需要修改一下即可。您获取错误消息的文本并在其前面加上您的 <span>，然后将默认错误标签的内容替换为您的新 HTML.

$("#forma").validate({
    // your rules & options,
    errorClass: "red",
    errorPlacement: function(error, element) {
        var html = '<span class="myspan"></span>' + $(error).text();
        $(error).html(html).insertAfter(element);
    }
});

演示：http://jsfiddle.net/zrekogqd/

检查 jsFiddle 的 DOM 显示了这个结果...

<label id="lastname-error" class="red" for="lastname">
    <span class="myspan"></span>This field is required.
</label>

需要将 HTML 放入 jQuery 验证插件的错误标签容器中

Need to put HTML within the error label container of jQuery Validate plugin

jquery

jquery-validate