21

私はTwitterのブートストラップと一緒に認証にソーサリーを使用しています。

<div class="field_with_errors">DOMに追加されるデフォルトのレールを変更して、Twitterのブートストラップのスタイルでサインアップフォームのエラーメッセージのスタイルを設定したいと思います。

このようなことをするためのレールの慣習は何ですか？

DOMを操作して名前を変更するJavaScriptを追加できると思いますが<div class="field_with_errors">、それはハックのようです。Railsでこれをオーバーライドする方法があるはずですが、どこでそれを行うのかわかりません。

これは、ブートストラップで、組み込みのフォームエラースタイルを使用するためにエラーをマークアップする必要がある方法です。

<div class="control-group error">
  <label class="control-label" for="inputError">Input with error</label>
  <div class="controls">
    <input type="text" id="inputError">
    <span class="help-inline">Please correct the error</span>
  </div>
</div>
4

6 に答える 6

31

上記のリンクから、以下を中に入れるclass Application < Rails::Applicationとconfig/application.rb

config.action_view.field_error_proc = Proc.new { |html_tag, instance| 
  "<div class=\"field_with_errors control-group error\">#{html_tag}</div>".html_safe
}

検証が失敗するたびに、入力タグの周囲に赤いマーカーが表示されます

于 2013-04-19T11:53:08.343 に答える
12

Rails6とBootstrap4を使用して、is-invalidクラスを追加する必要があります。あまり派手にならずに、私はちょうどしました：

ActionView::Base.field_error_proc = proc do |html_tag, instance|
  html_tag.gsub("form-control", "form-control is-invalid").html_safe
end
于 2020-04-26T09:04:34.683 に答える
1

Bootstrap 3.2の場合、sthを使用できます。nokogiriこのように（ gemをGemfileに追加します）：

ActionView::Base.field_error_proc = Proc.new do |html_tag, instance|
  html = %(<div class="field_with_errors">#{html_tag}</div>).html_safe
  # add nokogiri gem to Gemfile

  form_fields = [
    'textarea',
    'input',
    'select'
  ]

  elements = Nokogiri::HTML::DocumentFragment.parse(html_tag).css "label, " + form_fields.join(', ')

  elements.each do |e|
    if e.node_name.eql? 'label'
      html = %(<div class="control-group has-error">#{e}</div>).html_safe
    elsif form_fields.include? e.node_name
      if instance.error_message.kind_of?(Array)
        html = %(<div class="control-group has-error">#{html_tag}<span class="help-block">&nbsp;#{instance.error_message.uniq.join(', ')}</span></div>).html_safe
      else
        html = %(<div class="control-group has-error">#{html_tag}<span class="help-block">&nbsp;#{instance.error_message}</span></div>).html_safe
      end
    end
  end
  html
end

このコードをconfig/initializers/field_error_proc.rbファイル内に配置します（存在しない場合は作成します）

これは、次のコードからわずかに変更されています。RailsでのActionView::Base.field_error_procのオーバーライド

于 2014-09-15T21:22:00.047 に答える
0

SimpleFormを使用している場合、application.rbでProcを使用するという一般的な回答は機能しないことに注意してください。代わりに、simple_form初期化子を編集する必要があります。たとえば、Bootstrap3.2を使用します。

config.wrappers :default, class: :input,
  hint_class: :field_with_hint, error_class: :'has-error' do |b|
  [...]
  b.use :hint,  wrap_with: { tag: :span, class: :'text-warning' }
  b.use :error, wrap_with: { tag: :span, class: :'text-danger' }
end
于 2014-09-23T16:55:15.097 に答える
0

Rails5のTwitterBootstrap3.3.6は、初期化子に組み込まれcustomize_error.rb、私のために機能します。

ActionView::Base.field_error_proc = proc { |html_tag, _instance| "<div class=\"has-error\">#{html_tag}</div>".html_safe }
于 2017-03-28T19:53:51.240 に答える
0

チェックボックスのみのエラーをオフにしたかったので、次のようにしました。

ActionView::Base.field_error_proc = Proc.new do |html_tag, instance|
  doc = Nokogiri::HTML::Document.parse(html_tag)
  if doc.xpath("//*[@type='checkbox']").any?
    html_tag
  else
    "<div class=\"field_with_errors\">#{html_tag}</div>".html_safe
  end
end
于 2019-08-21T16:48:44.660 に答える