自定义jQuery验证插入HTML

Question

我无法使用jQuery Validation plugin（带有jQuery 1.9.1的1.12.0版）编辑插入的HTML。我想在创建的错误元素中添加一个Font Awesome图标。它将出现在错误消息之前，这意味着在消息之前会显示一个好的感叹号。

我想要的是什么：

<input type="text" id="email" />
<span for="email" class="invalid">
    <i class="fa fa-exclamation-circle"></i> This field is required.
</span>

它会是什么样子：

到目前为止我有什么：

$(".validate-form").validate({
    errorClass: "invalid",
    errorElement: "span"
});

我实际上可以通过编辑默认消息来包含HTML来实现这一点，但这有点像hacky方式。 这就是我正在做的就是取得了预期的结果：

jQuery.extend(jQuery.validator.messages, {
    required: '<i class="fa fa-exclamation-circle"></i> ' + "This field is required."
});

我也试过使用errorPlacement回调，但没有运气。有谁知道我怎么能做到这一点？

Answer 1

您想要的输出：

<input type="text" id="email" />
<span for="email" class="invalid">
    <i class="fa fa-exclamation-circle"></i> This field is required.
</span>

首先，错误的是您的input缺少name属性。此插件必须使用name属性。此外，AFAIK，您不能将for属性用于label以外的任何内容。除非您使用label更改邮件，否则邮件本身将位于errorElement: "span"容器内。

<input type="text" name="email" id="email" />
<span class="invalid">
    <i class="fa fa-exclamation-circle"></i><span>This field is required.</span>
</span>

创建所需的HTML标记并将其设置为display: none。使用CSS在错误消息之前插入一些空格。

<input type="text" name="email" id="email" />
<span class="invalid" style="display: none;">
    <i class="fa fa-exclamation-circle"></i>
</span>

然后尝试这样的事情......

errorClass: 'invalid',  // default "error"
errorElement: 'span',   // default "label"
errorPlacement: function(error, element) {
    error.insertAfter(element.next('span').children());
},
highlight: function (element) {
    $(element).next('span').show();
},
unhighlight: function (element) {
    $(element).next('span').hide();
}