twitter-bootstrap - 使用 Bootstrap 标记表单中的错误

Question

我开始使用 Bootstrap 来实现漂亮的页面设计，而不需要求助于 GWT(后端是用 java 编写的)

对于我的登录屏幕，我复制了此 example 。现在我想标记一个错误，例如，用户名留空。所以我想知道 Bootstrap 框架中的程序是什么。或者也许有示例显示表单有错误。

我不确定这个想法是用红色在输入元素内显示错误消息，还是在输入元素下方显示错误消息，或者可能用弹出窗口显示？

Answer 1

(已更新 Bootstrap v4、v3 和 v3 的示例)

带有 Bootstrap 过去几个主要版本的验证类的表单示例。

Bootstrap v4

请参阅live version在代码笔上

<div class="container">
  <form>
    <div class="form-group row">
      <label for="inputEmail" class="col-sm-2 col-form-label text-success">Email</label>
      <div class="col-sm-7">
        <input type="email" class="form-control is-valid" id="inputEmail" placeholder="Email">
      </div>
    </div>

    <div class="form-group row">
      <label for="inputPassword" class="col-sm-2 col-form-label text-danger">Password</label>
      <div class="col-sm-7">
        <input type="password" class="form-control is-invalid" id="inputPassword" placeholder="Password">
      </div>
      <div class="col-sm-3">
        <small id="passwordHelp" class="text-danger">
          Must be 8-20 characters long.
        </small>      
      </div>
    </div>
  </form>
</div>

Bootstrap v3

请参阅live version在代码笔上

<form role="form">
  <div class="form-group has-warning">
    <label class="control-label" for="inputWarning">Input with warning</label>
    <input type="text" class="form-control" id="inputWarning">
    <span class="help-block">Something may have gone wrong</span>
  </div>
  <div class="form-group has-error">
    <label class="control-label" for="inputError">Input with error</label>
    <input type="text" class="form-control" id="inputError">
    <span class="help-block">Please correct the error</span>
  </div>
  <div class="form-group has-info">
    <label class="control-label" for="inputError">Input with info</label>
    <input type="text" class="form-control" id="inputError">
    <span class="help-block">Username is taken</span>
  </div>
  <div class="form-group has-success">
    <label class="control-label" for="inputSuccess">Input with success</label>
    <input type="text" class="form-control" id="inputSuccess" />
    <span class="help-block">Woohoo!</span>
  </div>
</form>

Bootstrap v2

请参阅live version在jsfiddle上

.error、.success、.warning 和 .info 类附加到 .control-group。这是 v2 中的标准 Bootstrap 标记和样式。只要遵循这一点，您就处于良好状态。当然，如果您愿意，您可以超越自己的样式来添加弹出窗口或“内联闪存”，但如果您遵循 Bootstrap 约定并将这些验证类卡在 .control-group 上，它将保留一致且易于管理(至少因为您将继续受益于 Bootstrap 文档和示例)

  <form class="form-horizontal">
    <div class="control-group warning">
      <label class="control-label" for="inputWarning">Input with warning</label>
      <div class="controls">
        <input type="text" id="inputWarning">
        <span class="help-inline">Something may have gone wrong</span>
      </div>
    </div>
    <div class="control-group error">
      <label class="control-label" for="inputError">Input with error</label>
      <div class="controls">
        <input type="text" id="inputError">
        <span class="help-inline">Please correct the error</span>
      </div>
    </div>
    <div class="control-group info">
      <label class="control-label" for="inputInfo">Input with info</label>
      <div class="controls">
        <input type="text" id="inputInfo">
        <span class="help-inline">Username is taken</span>
      </div>
    </div>
    <div class="control-group success">
      <label class="control-label" for="inputSuccess">Input with success</label>
      <div class="controls">
        <input type="text" id="inputSuccess">
        <span class="help-inline">Woohoo!</span>
      </div>
    </div>
  </form>