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）您将得到以下invalid HTML。

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

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

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

DEMO：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>",

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

3 个答案: