将jQuery验证插件消息放在新行中

Question

我正在使用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

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

1)您将得到以下无效的 HTML.

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

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

正确的方法是使用插件的内置wrapper选项,它改变了label成div自动为每条消息.

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

$(document).ready(function () {

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

});