Rails 3:"field-with-errors"包装器改变了页面外观.怎么避免这个？

Question

电邮领域:

<label for="job_client_email">Email: </label> 
<input type="email" name="job[client_email]" id="job_client_email">

看起来像这样:

但是,如果电子邮件验证失败,它将变为:

<div class="field_with_errors">
  <label for="job_client_email">Email: </label>
</div> 
<div class="field_with_errors">
  <input type="email" value="wrong email" name="job[client_email]" id="job_client_email">
</div>

看起来像这样:

我怎么能避免这种外观变化？

Answer 1

你应该覆盖ActionView::Base.field_error_proc.它目前定义为ActionView::Base:

 @@field_error_proc = Proc.new{ |html_tag, instance| 
   "<div class=\"field_with_errors\">#{html_tag}</div>".html_safe
 }

您可以通过将其放在应用程序的类中来覆盖它config/application.rb:

config.action_view.field_error_proc = Proc.new { |html_tag, instance| 
  html_tag
}

重新启动rails服务器以使此更改生效.

Answer 2

您看到的视觉差异正在发生,因为div元素是一个块元素.将此样式添加到CSS文件中,使其行为类似于内联元素:

.field_with_errors { display: inline; }

Answer 3

我目前使用此解决方案,放在初始化程序中:

ActionView::Base.field_error_proc = Proc.new do |html_tag, instance|
  class_attr_index = html_tag.index 'class="'

  if class_attr_index
    html_tag.insert class_attr_index+7, 'error '
  else
    html_tag.insert html_tag.index('>'), ' class="error"'
  end
end

这允许我只是将类名添加到适当的标记,而不创建其他元素.

Answer 4

额外的代码正在添加ActionView::Base.field_error_proc.如果您不是field_with_errors用来设置表单样式,可以在application.rb以下位置覆盖它:

config.action_view.field_error_proc = Proc.new { |html_tag, instance| html_tag.html_safe }

或者,您可以将其更改为适合您的UI:

config.action_view.field_error_proc = Proc.new { |html_tag, instance| "<span class='field_with_errors'>#{html_tag}</span>".html_safe }

Answer 5

我正在使用 Rails 5 和Materialize-Sass，我在 Rails 处理失败字段验证的默认行为方面遇到了一些问题，如下图所示，这是因为div在验证失败的输入字段中添加了额外的内容。

使用@Phobetron 回答并修改 Hugo Demiglio 的回答。我对这些代码块进行了一些调整，并且在以下情况下运行良好：

• 如果两者input和label在class任何地方都有自己的属性
  • <input type="my-field" class="control">
  • <label class="active" for="...">My field</label>
• 如果inputorlabel标签没有class属性
  • <input type="my-field">
  • <label for="...">My field</label>
• 如果label标签内部有另一个标签class attribute
  • <label for="..."><i class="icon-name"></i>My field</label>

在所有这些情况下，如果存在，error类将被添加到class属性中的现有类，或者如果它不存在于标签或输入标签中，则将创建它。

ActionView::Base.field_error_proc = Proc.new do |html_tag, instance|
    class_attr_index = html_tag.index('class="')
    first_tag_end_index = html_tag.index('>')

    # Just to inspect variables in the console
    puts ' ' * 50
    pp(html_tag)
    pp(class_attr_index)
    pp(first_tag_end_index)

    if class_attr_index.nil? || class_attr_index > first_tag_end_index
        html_tag.insert(first_tag_end_index, ' class="error"')
    else
        html_tag.insert(class_attr_index + 7, 'error ')
    end

    # Just to see resulting tag in the console
    pp(html_tag)
end

我希望它对像我一样条件相同的人有用。