JQuery Validation 插件消息样式答案

【问题标题】：JQuery Validation plugin message styleJQuery Validation 插件消息样式
【发布时间】：2013-02-16 18:32:12
【问题描述】：

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

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

这是live example。我需要以某种方式在错误消息之前插入，但我不知道该怎么做。有什么想法吗？

明确一点：插件不应显示带有“错误”类的元素，而是应如下所示：

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

【问题讨论】：

标签： jquery css jquery-validate

【解决方案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

【讨论】：

正是我想要的！谢谢！
有没有办法插入两个包装？由于有一个容器 div，我似乎遇到了问题。错误的宽度使得错误在输入字段下方下降。使用相对定位在输入字段下留下一个空白空间，所以我需要有 2 个元素，其中一个是相对定位的，其中有一个绝对定位的包装器，其中错误消息...

【解决方案2】：

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

查看 jquery 验证文档here

例如：

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

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

【讨论】：

我知道如何编辑errorElement，但问题是错误不应该只是一个元素，它应该是两个元素，如现场示例所示。对不起，如果我的问题不是那么清楚。
stackoverflow.com/questions/860055/…
@arbitter ：但在这种情况下，jquery 验证将无法删除您附加的跨度（如果字段不包含任何错误）并且您必须明确删除它，它将是额外的头痛。所以我认为，您应该尝试将相同的 css 应用于错误容器。
所以我应该使用包装器方法而不是<label></label>？我的定位有点问题：jsfiddle

【解决方案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);
    }
});

【讨论】：

这确实很好，作为 vlcekmi3 的解决方案。但是现在我遇到了另一个问题：JSFiddle。如您所见，错误显示在字段下方而不是旁边。此外，当使用position:relative 重新定位它们时，会留下空白。
您已指定#container div 宽度。这就是为什么它不能正常来。如果你增加那个 div 的宽度，问题就可以解决。
没错，但 div 不应该更宽。错误消息应该与 div 的边框重叠。

【解决方案4】：

当我在样式表末尾写这篇文章时，这对我有用

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

【讨论】：