このようにエラーメッセージのHTMLビューを設定していますか？

Question

私はTwitter-Bootstrapを使用し、それがメインのサイト上でそれをしないか、エラーのビューを表示するための正しいHTMLを生成したいよ：

上記フィールドのHTMLは次のとおりです。

<div class="control-group error"> 
<label for="inputError" class="control-label">Input with error</label> 
    <div class="controls"> 
    <input type="text" id="inputError"> 
    </div> 
</div> 

注：私はPlease correct the error, <span>を削除しました。入力フィールドとラベルが必要です。

そして、私は、一例としてemailフィールドを私のサインアップページを使用していた場合、それは次のようになります。

私はそれのように機能するために得るために何をしなければならない何

<div class="control-group"> 
<label for="user_email" class="control-label">Email*</label> 
    <div class="controls"> 
    <input type="email" value="" name="user[email]" id="user_email" class="span3"> 
    </div> 
</div> 

前者？

Answer 1

ホイールを再発明しないでください。 simple_formを使用してください。あなたはsimple_formヘルパーを使用することができ、それに

rails generate simple_form:install --bootstrap 

：宝石の現在のバージョンは、あなたが次のことを行うことができます。彼らはあなたのために適切なものを生成します。

Answer 2

エラーメッセージが表示された場合、Railsは自動的にクラスfield_with_errorsのdivを生成します。そのdivは要素をエラーでラップします。それをカスタマイズするためには、application.rbに次の行を追加することができます。

config.action_view.field_error_proc = Proc.new { |html_tag, instance| %Q(<div class="field_with_errors">#{html_tag}</div>).html_safe } 

これがデフォルトなので、Twitterのブートストラップと同じ構造を得るために、あなたはそれで遊ぶことができます。

html_tagは、エラーのあるフィールドのプレースホルダです（例： <input name="model[attribute]" size="30" type="text" value="">

これを別のdivに囲み、「エラーを修正してください」というスパンを追加することもできます。

さらに詳しい情報：http://guides.rubyonrails.org/configuring.html - 項目3.9

Answer 3

私はこの問題に遭遇してきた、とブートストラップCSSへの簡単な変更でそれを修正しました。

私の通常のフィールドコードは次のとおりです。

<div class="control-group"> 
    <%= f.label :fieldname, t('models.model.fieldname'), :class => "control-label" %> 
    <div class="controls"> 
     <%= f.text_field :fieldname, :class => 'input-large' %> 
    </div> 
</div> 

私はf.labelとf.text_fieldラベルや入力を使用していますので、両方の結果のHTMLを作り、（ニコラスが言及したように）field_with_errorsクラスでのdivでカプセル化されています

<div class="control-group"> 
    <div class="field_with_errors"><label class="control-label" for="model_fieldname">Field name</label></div> 
    <div class="controls"> 
     <div class="field_with_errors"><input class="input-large" id="model_fieldname" name="model[fieldname]" size="30" type="text" value=""></div> 
    </div> 
</div> 

これらは私がbootstrap.cssにいくつかの余分なセレクタを追加するブートストラップの<div class="control-group error">スタイルと同じ外観の外観を持たせます。私は.control-group.error ...へのすべての参照を見つけ、.control-group .field_with_errors ...と重複する行を追加します。だから私はこの種のもので終わる：

.control-group.error > label, 
.control-group.error .help-block, 
.control-group.error .help-inline, 
.control-group .field_with_errors > label, 
.control-group .field_with_errors .help-block, 
.control-group .field_with_errors .help-inline { 
    color: #b94a48; 
} 

それはRailsのためにそれを行うための最もエレガントな方法ではないかもしれませんが、私にはそれがより多くの依存宝石よりも簡単か、エラー処理を上書きするように見えました。はい、ブートストラップを更新するたびに同じ変更を加えなければなりませんが、かなり単純な変更であり、おそらくパッチファイルを作成して自動的に行うことができます。