jquery - JQuery Validation 插件消息样式

Question

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

我已经编辑了插件的代码来更改消息的语言。我知道这可以用 javascript 完成，但最好是“硬编码”。不过，这在现场示例中看不到。

这是现场示例。我需要以<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;
}

现场演示

Answer 2

您可以使用errorElement属性来指定错误容器应该是什么。即使您想为错误容器指定类，也可以使用errorClass指定它。

请参阅此处的 jquery 验证文档

例如 ：

$(".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;
}