如何更改默認 rails 錯誤 div “field_with_errors”

Question

我正在使用巫術和twitter bootstrap進行身份驗證。

我想通過更改添加到 DOM 的默認 rails <div class="field_with_errors">以 Twitter 引導程序的樣式在我的注冊表單上設置錯誤消息的樣式。

做這樣的事情的 rails 約定是什么？

我想你可以添加一些 javascript 來操作 DOM 來重命名<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>

Answer 1

從上面的鏈接中，如果您將以下內容放入class Application < Rails::Application of 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
}

每當驗證失敗時，您的輸入標簽周圍都會有一個紅色標記

Answer 2

在 Bootstrap 4 中使用 Rails 6，您需要添加is-invalid類。 沒有太花哨，我只是做了：

ActionView::Base.field_error_proc = proc do |html_tag, instance|
  html_tag.gsub("form-control", "form-control is-invalid").html_safe
end

Answer 3

對於 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文件中（如果不存在則創建一個）

這是稍微修改的代碼： Overriding ActionView::Base.field_error_proc in Rails

Answer 4

請注意，如果您使用的是 SimpleForm，那么在 application.rb 中使用 Proc 的公認答案將不起作用。 相反，您應該編輯 simple_form 初始值設定項。 例如使用 Bootstrap 3.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

Answer 5

Rails 5 上的 Twitter Bootstrap 3.3.6，這在初始化器customize_error.rb ，對我有用：

ActionView::Base.field_error_proc = proc { |html_tag, _instance| "<div class=\"has-error\">#{html_tag}</div>".html_safe }

Answer 6

我只想關閉checkboxes的錯誤，所以我這樣做了：

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