21

我正在使用巫术和twitter bootstrap进行身份验证。

<div class="field_with_errors">我想通过更改添加到 DOM的默认导轨，以 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>
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

使用带有 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
于 2020-04-26T09:04:34.683 回答
1

对于 Bootstrap 3.2，您可以使用 sth。像这样（将nokogirigem 添加到您的 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

于 2014-09-15T21:22:00.047 回答
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
于 2014-09-23T16:55:15.097 回答
0

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 }
于 2017-03-28T19:53:51.240 回答
0

我只想为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
于 2019-08-21T16:48:44.660 回答