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

时间:2012-09-03 17:57:54

标签: ruby-on-rails twitter-bootstrap

我正在使用sorcery进行身份验证以及twitter bootstrap

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

做这样的事情的轨道惯例是什么?

我想你可以添加一些操纵DOM的javascript来重命名<div class="field_with_errors">,但这看起来像是一个黑客。似乎应该有一种方法可以在rails中覆盖它,但我无法弄清楚在哪里这样做。

这就是bootstrap要求您标记错误以使用其内置表单错误样式的方式:

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

6 个答案:

答案 0 :(得分:25)

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

只要验证失败,您的输入标签就会有一个红色标记

答案 1 :(得分: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

答案 2 :(得分:1)

对于Bootstrap 3.2,你可以使用......像这样(将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

答案 3 :(得分:1)

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

答案 4 :(得分:0)

请注意,如果您使用的是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 :(得分:-1)

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

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