asp.net-mvc-4 - 使用 Twitter Bootstrap 3 放置验证消息的最佳实践是什么

Question

我正在使用 MVC4，但我想这对于使用新 Bootstrap 3 版本的任何人来说都是一个问题。由于 form-control 现在默认为 width:100%，放置验证消息的最佳做法是什么？

在版本 2.x 中，将验证消息放置在输入控件之后的帮助内联范围中最能确保消息放置在控件的右侧。


但是在版本 3 中，它们总是被推到底部，使所有控件都向下移动，因为验证消息被强制置于控件之下。

<div class="form-group has-error">
    <label for="Label" class="col-lg-2 control-label">Label</label>
    <div class="col-lg-5">
        <input class="form-control input-validation-error" data-val="true" data-val-required="Required" id="Label" name="Label" type="text" value="">
        <span class="help-inline"><span class="field-validation-error" data-valmsg-for="Label" data-valmsg-replace="true"><span for="Label" generated="true" class="">Required</span></span></span>
    </div>
</div>

我考虑过手动将它们设置在这样的新列上(如下)，但想知道是否有更可接受的方式或更少手动的方式来处理这个问题。

<div class="form-group has-error">
    <label for="Label" class="col-lg-2 control-label">Label</label>
    <div class="col-lg-5">
        <input class="form-control input-validation-error" data-val="true" data-val-required="Required" id="Label" name="Label" type="text" value="">
    </div>
    <div class="col-lg-5">
        <p class="form-control-static"><span class="field-validation-error" data-valmsg-for="Label" data-valmsg-replace="true"><span for="Label" generated="true" class="">Required</span></span></p>
    </div>
</div>

Answer 1

我不会说有呈现表单验证错误的“最佳实践”。它更多的是个人设计选择。

根据您要编写的 JS 数量，您可能会有点花哨并插入一个输入组插件，该插件在工具提示图标中包含一条错误消息，就像这样......

<div class="input-group">
  <input type="text" class="form-control">
  <span class="input-group-addon">
    <i data-toggle="tooltip" title="Error msg here" data-container="body" class="glyphicon glyphicon-question-sign"></i>
  </span>
</div>

不过老实说，我认为出现在输入字段下方的消息很好，只要它们不干扰页面布局并在它们出现时将内容向下推。 (这只是拥有一个显示 block 并具有硬编码高度的容器的问题。)