使用Bootstrap在表单中标记错误

Question

我已经开始使用Bootstrap来实现一个不错的页面设计而不需要使用GWT(后端是用java制作的)

对于我的登录屏幕,我复制了这个例子.现在我想标记一个错误,例如,用户名是空的.所以我想知道Bootstrap框架中的程序是什么.或者,如果有示例显示表单有错误.

我不确定这个想法是用红色在输入元素里面显示错误信息,还是在输入元素下面显示错误信息,或者用弹出窗口显示？

Answer 1

(更新了Bootstrap v4,v3和v3的示例)

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

Bootstrap v4

查看codepen上的实时版本

<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

查看codepen上的实时版本

<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

查看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>

Answer 2

Bootstrap V3:

官方文档链接1
官方文档链接2

<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>
<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>

Answer 3

在使用bootstrap模态类(v 3.3.7)时,也可以使用以下类... help-inline和help-block在模态中不起作用.

<span class="error text-danger">Some Errors related to something</span>

输出如下所示: