如何更改默认的rails错误div“field_with_errors”答案

【问题标题】：How to change the default rails error div "field_with_errors"如何更改默认的rails错误div“field_with_errors”
【发布时间】：2012-08-28 10:51:06
【问题描述】：

我使用sorcery 和twitter bootstrap 进行身份验证。

我想通过更改添加到 DOM 的默认 rails <div class="field_with_errors">，以 twitter 引导程序的样式设置我的注册表单上的错误消息样式。

做这样的事情的rails约定是什么？

我想您可以添加一些 javascript 来操纵 DOM 以重命名 <div class="field_with_errors">，但这似乎是一种 hack。似乎应该有一种方法可以在 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>

【问题讨论】：

我想你正在寻找这个
stackoverflow.com/questions/5267998/…
@prem：谢谢！正要自己链接到那个。

标签： ruby-on-rails twitter-bootstrap

【解决方案1】：

从上面的链接中，如果您将以下内容放在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
}

当验证失败时，您的输入标签周围会有一个红色标记

【讨论】：

这会导致表单水平的标签使输入跳线，有解决方法吗？
我通过在特定操作方法中添加受ActionView::Base.field_error_proc = Proc.new{ |html_tag, instance| "<div class=\"field_with_errors\">#{html_tag}</div>".html_safe } 启发的内容来更改单个操作的行为。 ref

【解决方案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

【讨论】：

【解决方案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的略微修改的代码

【讨论】：

【解决方案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

【讨论】：

【解决方案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 }

【讨论】：

【解决方案6】：

我只想关闭复选框的错误，所以我这样做了：

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

【讨论】：