"field_with_errors"クラスをRailsの既存の要素に適用する方法はありますか？

Question

私はRailsアプリケーションでフォームデータを検証していますが、 "field_with_errors"クラスを含むdivはFlexboxスタイルのフォームを投げ捨てています。

新しいdivを作成する代わりに、既存の要素に「field_with_errors」クラスを追加する方法はありますか？

例：

<li class="field_with_errors"> 
    <input .... /> 
</li> 

なく

<div class="field_with_errors"> 
    <li> 
    <input .... /> 
    </li> 
</div> 

Answer 1

あなたはActionView :: Base.field_error_procをオーバーライドする必要があります。それは、ActionView ::ベースで定義されています：

@@field_error_proc = Proc.new{ |html_tag, instance| 
    "<div class=\"field_with_errors\">#{html_tag}</div>".html_safe 
} 

あなたはもっと自分のUIに合わせてそれを変更することができます。

config.action_view.field_error_proc = Proc.new { |html_tag, instance| "<li class='field_with_errors'>#{html_tag}</li>".html_safe } 

は、サーバーを再起動し

、あなたが行ってもいいはずです。

Answer 2

私はこの問題の回避策を（hashrocketの助けを借りて）考え出しました。

初期コード：

<li> 
<span>Email</span> 
<%= f.text_field :email%> 
</li> 

私は、この設定を追加しました：

config.action_view.field_error_proc = Proc.new 
{ |html_tag, instance| "#{html_tag}".html_safe } 

私は今、無効な電子メール入力してフォームを送信する場合：

<li> 
<span>Email</span> 
<span id="input_tag"></span> // added by Rails 
<%= f.text_field :email%> 
</li> 

次にCSSで、新しい要素の表示をnoneに設定しましたが、次の入力フィールドをターゲットにするために使用します：

form ul li span#input_tag { 
display: none; 
} 

form ul li span#input_tag + input { 
border: 2px solid red; 
} 

最も洗練された解決策ではありませんが、私の目的のために動作します。

どんな洗練されたソリューションも歓迎されます。