1

我的表单上有 jquery 验证插件。目前它以这种方式配置，因此它为输入添加边框颜色。如果字段验证失败，则边框变为红色，如果正确，则边框变为绿色。现在由于该设置，我已禁用消息显示。

但我需要在输入字段下方的一个单独的 div 中显示所有消息。我不知道该怎么做。

您可以在此处查看当前情况：http: //jsfiddle.net/dzorz/akLQR/

所以'name'和'place'是我的两个字段'messages_container'是我的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;
}

你可以自由地 fork 或更新我的 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 回答