1

フォームに jquery 検証プラグインがあります。現在、そのように構成されているため、入力に境界線の色が追加されます。フィールドで検証が失敗した場合、境界線は赤になり、正しい場合は境界線が緑になります。その設定のために、メッセージの表示を無効にしました。

しかし、入力フィールドの下の 1 つの区切られた div にすべてのメッセージを表示する必要があります。そして、私はそれを行う方法がわかりません。

ここで現在の状況を確認できます: http://jsfiddle.net/dzorz/akLQR/

「name」と「place」は私のフィールドの 2 つです。「messages_container」は、スクリプトで定義された 2 つのメッセージを表示する div です。

html:

 <form class="form-horizontal" id="gold_form" method='post' action='/start_ajax/addgold/'>
 <fieldset>
    <span class="label-f">Name</span>
    <input type="text" class="span4" id="name" name="name">
    </br>
    <span class="label-f">Place</span>
    <input type="text" class="span4" id="place" name="place">
    </br>
    <div class="messages_container">
     </div>
    <button type="submit" id="submit_btn" class="btn btn-primary btn-large">Submit</button>
</fieldset>
</form>

脚本：

//validation
$().ready(function() {

                $("#gold_form").validate(
                    {
                    rules:{
                           name: "required",
                           place: "required"
                          },
                    messages:{
                        name: "Please input your name.",
                        place: "Please input your name.",
                    },
    errorPlacement: function(error, element) {
        $(element).filter(':not(.valid)').addClass("invalid");
    },
    success: function(error) {
        $("#gold_form").find('.valid').removeClass("invalid").addClass("success");
    },
                    });
                });

CSS:

@import   url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');


.invalid {
border: 1px solid red !important;
}

.success{
border: 1px solid green !important;
}

.messages_container{
 border: 1px solid;
 width:300px;
 height:150px;
 margin-left:37px;
}

私のjsfiddleを自由にフォークまたは更新できます.アイデアや解決策を教えてください。

4

1 に答える 1

1

変化する

$().ready(function() {

  $("#gold_form").validate(
  {
    rules:{
     name: "required",
     place: "required"
   },
   messages:{
    name: "Please input your name.",
    place: "Please input your name.",
  },
  errorPlacement: function(error, element) {
    $(element).filter(':not(.valid)').addClass("invalid");
  },
  success: function(error) {
    $("#gold_form").find('.valid').removeClass("invalid").addClass("success");
  },
});
});

に

$().ready(function() {

  $("#gold_form").validate(
  {
    rules:{
     name: "required",
     place: "required"
   },
   messages:{
    name: "Please input your name.",
    place: "Please input your name.",
  },
  errorPlacement: function(error, element) {
    $(element).filter(':not(.valid)').addClass("invalid");
    error.appendTo($('.message_container'))
  },
  success: function(error) {
    $("#gold_form").find('.valid').removeClass("invalid").addClass("success");
  },
});
});

に追加された行に注意してくださいerrorPlacement

デモ

于 2013-06-21T09:51:18.813 に答える