この方法でエラーメッセージHTMLビューを設定しますか？

StackOverflow https://stackoverflow.com/questions/9301059

質問

私は使用しています Twitter-Bootstrap また、正しいHTMLを生成して、メインサイトでどのように行うかを表示するエラービューを表示します。

ex

上記のフィールドの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 フィールド、それは次のとおりです。

ex2

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

前者のように機能させるために私は何をしなければなりませんか？

役に立ちましたか？

解決

ホイールを再発明しないでください。使用する simple_form. 。宝石の現在のバージョンを使用すると、次のことを行うことができます。

rails generate simple_form:install --bootstrap

それで、Simple_formヘルパーを使用できます。彼らはあなたのために正しいものを生成します。

他のヒント

この問題に遭遇したばかりで、ブートストラップ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 ラベルと入力はどちらもdivでカプセル化されています field_with_errors クラス（ニコラスが言及しているように）、結果のHTMLを作成します。

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

これらを作るには、ブートストラップと同じ外観を持っています <div class="control-group error"> スタイル私はいくつかの追加のセレクターを追加します bootstrap.css. 。私はすべての参照を見つけます .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;
}

それはレールのためにそれを行う最もエレガントな方法ではないかもしれませんが、私にとっては、より依存する宝石やエラー処理をオーバーライドするよりもはるかに簡単に思えました。はい、Bootstrapを更新するたびに同じ変更を加える必要がありますが、それらはかなり単純な変更であり、おそらく自動的に実行するためにパッチファイルを作成することができます。

Railsは、クラスでDIVを自動的に生成します field_with_errors エラーメッセージが表示されたとき。その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 Bootstrapと同じ構造を取得するために、プレイできます。

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

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

より詳しい情報： http://guides.rubyonrails.org/configuring.html - 項目3.9

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top