jquery - 将 jQuery Validate 插件消息放在新行中

Question

我正在使用 jQuery 验证。

一切正常，但是当有多个消息时，消息会显示在另一个旁边。

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

$("#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

接受的答案是一个黑客......

1) 你最终会得到以下无效的HTML。

<label><div>Your message</div></label>

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

---

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

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

$(document).ready(function () {

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

});

Answer 2

您可以在错误消息前简单地添加<br/>标签：

messages: {"name": {required: "<br/>Error validation message"}}

Answer 3

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

name: "<div class='msgRow'>Please enter your name.</div>",
email: "<div class='msgRow'>Please enter a valid email address.</div>",
password: "<div class='msgRow'>Please enter at least 8 password characters.</div>",