twitter-bootstrap - Bootstrap を使用してフォームにエラーをマークする

Question

GWT に頼らずに素敵なページ デザインを実現するために、Bootstrap を使い始めました (バックエンドは Java で作成されています)。

私のログイン画面では、この例をコピーしました。たとえば、ユーザー名が空のままだったというエラーをマークしたいと思います。したがって、これに対する Bootstrap フレームワークの手順は何なのか疑問に思っていました。または、エラーのあるフォームを示す例がある場合。

エラーメッセージを入力要素内に赤い色で表示するのか、入力要素の下に表示するのか、ポップアップで表示するのかはわかりません。

Answer 1

(Bootstrap v4、v3、および v3 の例で更新)

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>

ブートストラップ 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>

ブートストラップ v2

jsfiddleでライブ バージョンを参照してください

、、およびクラスが.errorに追加されます。これは、v2 の標準の Bootstrap マークアップとスタイリングです。それに従うだけで、あなたは元気です。もちろん、独自のスタイルを超えて、必要に応じてポップアップまたは「インライン フラッシュ」を追加することもできますが、Bootstrap の規則に従ってこれらの検証クラスをハングアップすると、一貫性が保たれ、管理が容易になります (少なくともBootstrap のドキュメントとサンプルの利点は引き続き利用できます).success.warning.info.control-group.control-group

  <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

ブートストラップ 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

通常、エラーが発生した場所の近くでエラーを表示するのが最適です。つまり、電子メールの入力に誤りがある場合は、電子メールの入力ボックスを強調表示します。

この記事には、いくつかの良い例があります。 http://uxdesign.smashingmagazine.com/2011/05/27/getting-started-with-defensive-web-design/

また、Twitter ブートストラップには、それを支援する素敵なスタイルがあります (検証状態セクションまでスクロールします) http://twitter.github.com/bootstrap/base-css.html#forms

各入力ボックスを強調表示するのは少し複雑なので、簡単な方法は、ユーザーが間違ったことの詳細を示すブートストラップ アラートを上部に配置することです。 http://twitter.github.com/bootstrap/components.html#alerts