Twitter Bootstrap 3を使用して検証メッセージを送信するためのベストプラクティスとは何ですか？

Question

私はMVC4を使用していますが、これは新しいBootstrap 3バージョンを使用している人にとっては問題です。フォームコントロールはデフォルトで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> 

正直にいえ...ちょっとツルツルを取得し、これと同様に、ツールチップアイコンにエラーメッセージを保持している入力グループのアドオンを挿入することができ入力欄の下に表示されるメッセージは、ページのレイアウトを妨げたり、コンテンツが表示されたときにコンテンツを押し込んだりしない限り、問題ないと思います。 （これはブロックを表示し、高さがハードコードされたコンテナを持つことの問題です）