5

私は MVC4 を使用していますが、これは新しい Bootstrap 3 バージョンを使用しているすべての人にとって問題だと思います。form-control がデフォルトで width:100% になったので、検証メッセージを配置するためのベスト プラクティスは何ですか?

バージョン 2.x では、入力コントロールの直後の help-inline スパンに検証メッセージを配置すると、メッセージがコントロールの右側に配置されることが最も効果的でした。 ここに画像の説明を入力

しかし、バージョン 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>
4

1 に答える 1

3

フォームの検証エラーを表示するための「ベスト プラクティス」があるとは言えません。それは個人的なデザインの選択です。

書きたい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>

正直なところ、入力フィールドの下に表示されるメッセージは、ページ レイアウトを乱したり、表示されたときにコンテンツを押し下げたりしない限り、問題ないと思います。(これは、ブロックを表示し、ハードコーディングされた高さを持つコンテナーを使用するだけの問題です。)

于 2013-08-26T19:36:08.310 に答える