Question

我正在设置Jquery Validation plugin的错误消息样式，我遇到了一些困难。

我已经编辑了插件的代码来更改消息的语言。我知道这可以用javascript完成，但似乎更好的做到'硬编码'。但是在实例中没有看到这一点。

这是live example。我需要在错误消息之前以某种方式插入<span></span>，但我无法弄清楚如何。有什么想法吗？

要明确：代替显示类错误的插件，它应该显示如下：

<span class='pointer'></span><label class='error'>This is the error</label>

Answer 1

我认为你最好的选择是错误元素和一些CSS样式的包装：

$('#myform').validate({
    errorPlacement: function(label, element) {
        label.addClass('arrow');
        label.insertAfter(element);
    },
    wrapper: 'span'
});

这会给你这样的错误：

<span class='arrow'>
    <label class='error'>Error</label>
</span>

并使用一些CSS完成它。

span.arrow {
    margin-left: 6px;
    height:17px;
    background: url('http://i45.tinypic.com/f9ifz6.png') no-repeat left center;
}
label.error {
    height:17px;
    border-top:1px solid #99182c;
    border-right:1px solid #99182c;
    border-bottom:1px solid #99182c;
    margin-left:9px;
    padding:1px 5px 0px 5px;
    font-size:small;
}

live demo

Answer 2

您可以使用 errorElement 属性指定错误容器的内容。即使您要为error-container指定类，也可以使用 errorClass 指定它。

请参阅jquery验证文档here

例如：

$(".selector").validate({
    errorElement: "em"
});

将错误元素设置为“em”。

Answer 3

找到解决方案，这里是：

HTML：

<script src='http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.min.js'></script>Desired error:
<br />
<input type='text' name='username' class='error' />
<span class='arrow'></span>
<label class='error'>Error</label>
<br />
<br />
<br />
<form action='' method='post' id='myform'>
    <input type='text' name='username' required />
    <br />
    <input type='email' name='email' required />
    <br />
    <input type='submit' value='submit' />
</form>

CSS：

input {
    padding:5px;
}
input.error {
    border:1px solid #99182c;
}
span.arrow {
    height:17px;
    background: url('http://i45.tinypic.com/f9ifz6.png') no-repeat center left;
    top:4px;
}
label.error {
    border-top:1px solid #99182c;
    border-bottom:1px solid #99182c;
    border-right:1px solid #99182c;    
    color:black;
    padding:1px 5px 1px 5px;
    font-size:small;

}

JavaScript：

$('#myform').validate({
    wrapper: 'span',
    errorPlacement: function (error, element) {
        error.css({'padding-left':'10px','margin-right':'20px','padding-bottom':'2px'});
        error.addClass("arrow")
        error.insertAfter(element);
    }
});

Answer 4

当我在样式表

的末尾写下这个时，这对我有用

label.error{}
label.error{
    color:red;
}

JQuery Validation插件消息样式

4 个答案: