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）添加background-image和其他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>

＆＃34;我想这可以通过某些事件来完成＆＃34;

不，您不需要使用自定义事件或功能。您只需使用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);
    }
});

DEMO：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 Validate插件的错误标签容器中

1 个答案: