将jQueryvalidation插件消息放在新行中

我正在使用jQuery Validate。

这一切都正常工作，但当有更多的消息时，消息显示在另一个旁边。

我需要消息显示在他们自己的行中。

$("#myform").validate({ errorLabelContainer: "#messageBox", debug: false, rules: { name: "required", email: { required: true, email: true, }, password: { required: true, minlength: 8 }, }, messages: { name: "Please enter your name.", email: "Please enter a valid email address.", password: "Please enter at least 8 password characters.", } }); 

 Current display: Message1Message2Message3 Wanted display: Message1 Message2 Message3 

我怎样才能做到这一点？

Answer 1

您可以在消息周围添加div并正确设置样式。

 name: "
Please enter your name.
", email: "
Please enter a valid email address.
", password: "
Please enter at least 8 password characters.
", 

Answer 2

接受的答案是黑客 ……

1）您将得到以下无效的 HTML 。

 
Your message 

2）您需要声明自定义消息以覆盖每个默认消息。

---

正确的方法是使用插件的内置wrapper选项，它会自动将label 更改为每个消息的div 。

演示： http ： //jsfiddle.net/TSKHX/

 $(document).ready(function () { $('#myform').validate({ // initialize the plugin wrapper: 'div', errorLabelContainer: "#messageBox", // your other rules & options }); }); 

Answer 3

您可以在错误消息前面添加简单标签：

 messages: {"name": {required: "
Error validation message"}}