JQuery 验证插件消息样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14913677/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery Validation plugin message style
提问by jdepypere
I'm styling my error messages of the Jquery Validation pluginand I'm running into some difficulties.
我正在对Jquery 验证插件的错误消息进行样式设置，但遇到了一些困难。
I've already edited the code of the plugin to change language of the messages. I know this can be done with javascript, but it seems better to do it 'hardcoded'. This isn't seen in the live example though.
我已经编辑了插件的代码来更改消息的语言。我知道这可以用 javascript 来完成，但“硬编码”似乎更好。但这在现场示例中没有看到。
Here's the live example.
I need to insert a <span></span>before the error message somehow, but I can't figure out how to. Any ideas?
这是现场示例。我需要以<span></span>某种方式在错误消息之前插入一个，但我不知道该怎么做。有任何想法吗？
To be clear: instead of the plugin showing an elemenent with a class 'error', it should display like so:
需要明确的是：不是插件显示带有“错误”类的元素，它应该显示如下：
<span class='pointer'></span><label class='error'>This is the error</label>
<span class='pointer'></span><label class='error'>This is the error</label>
回答by vlcekmi3
i think your best choice will be wrapper of error element and some CSS styling:
我认为你最好的选择将是错误元素和一些 CSS 样式的包装器：
$('#myform').validate({
errorPlacement: function(label, element) {
label.addClass('arrow');
label.insertAfter(element);
},
wrapper: 'span'
});
which gives you errors like this:
这会给你这样的错误：
<span class='arrow'>
<label class='error'>Error</label>
</span>
and with some CSS you get it done.
使用一些 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;
}
回答by Prateek
You can use errorElementproperty to specify what should be the error container. Even if you want to specify class for error-container, you can specify it using errorClass.
您可以使用errorElement属性来指定应该是错误容器的内容。即使您想为 error-container 指定类，也可以使用errorClass指定它。
See the jquery validate documentation here
请参阅此处的 jquery 验证文档
For example :
例如 ：
$(".selector").validate({
errorElement: "em"
});
Sets the error element to "em".
将错误元素设置为“em”。
回答by Prateek
Found the solution, here it is :
找到了解决方案，这里是：
HTML :
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 :
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 :
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);
}
});
回答by sig
This works for me when I write this at the end of stylesheet
当我在样式表末尾写这个时，这对我有用
label.error{}
label.error{
color:red;
}
