0

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

これどうやってするの？

4

3 に答える 3

14

受け入れられた答えはハックです...

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
    });

});
于 2013-03-08T16:16:44.113 に答える
1

<br/>エラーメッセージの前にタグを簡単に追加できます：

messages: {"name": {required: "<br/>Error validation message"}}
于 2013-09-16T20:36:55.727 に答える
-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>",
于 2013-03-08T12:49:33.553 に答える