如何在Rails验证错误时突出显示字段

Question

你如何在Rails 3.1中显示表单字段高亮以显示验证错误？我知道脚手架会自动生成处理此操作的CSS和控制器代码，但我想知道是否有一种手动生成的方法。我已经通过以下方式实现了错误信息字符串的显示：@user.errors.full_messages.each...等等，但我无法使字段变为红色高亮。有什么建议吗？

谢谢。

- kdhuang

Answer 1

假设您的 CSS 文件中有一个针对字段的 error 类：

<% if @user.errors[:name] %>
  <%= f.label :name, :class => "error" %>
<% else %>
  <%= f.label :name %>
<% end %>

这是你想要的吗？

额外信息: 这里有一个关于自定义默认ActiveRecord验证CSS的部分。

编辑: (关于额外的if语句)

# app/helpers/application_helper.rb

def field_class(resource, field_name)
  if resource.errors[field_name]
    return "error".html_safe
  else
    return "".html_safe
  end
end

然后：

# in your view

<%= f.label :name, :class => field_class(@user, :name) %>
<%= f.label :password, :class => field_class(@user, :password) %>
[...]

(我可能在那里犯了一个错误 - 我正在手机上写作 - 但是你能得到基本的想法。你可以用无数种方式编写代码，所以按你喜欢的方式编写...)

- Jakub Naliwajek

---

谢谢。那个可以用，但这意味着我必须为每个表单字段都做一个if判断... - kdhuang

如果你喜欢的话，甚至可以在代码中写成一行。或者你甚至可以覆盖label本身，而不必再编写任何额外的字符。 - Jakub Naliwajek

我喜欢这段代码，已经使用了一段时间。对于那些希望节省空间的人来说，这是更少的行数... resource.errors[field_name].present? ? "error".html_safe : "".html_safe - notrab

现在有一种方法 @user.errors.include?(:name)，请参考 http://api.rubyonrails.org/classes/ActiveModel/Errors.html#method-i-include-3F。 - Artem P

Answer 2

Rails现在有一个很好的技巧。当出现错误时，Rails会在错误字段周围放置一个class为.field_with_errors的div。因此，现在您可以仅针对该class并添加样式。

要聚焦于输入，您可以执行以下操作：

.field_with_errors input{
  border: 1px solid red !important;
}

这个 CSS 会在 input 元素周围绘制一条漂亮的红线，而important! 会覆盖任何现有的样式。

- Abhilash

---

太棒了！这么简单！非常感谢。 - Fabrizio Bertoglio

Answer 3

我必须这样做 (resource.errors[field_name].length > 0) 才能让它工作：

def field_class(resource, field_name) 如果 resource.errors[field_name].length > 0 返回 " custom_error1 ".html_safe 否则 返回 "".html_safe 结束 end

- Greg Lafrance

---

或者您可以使用 present? 方法：if resource.errors[field_name].present? - rapcal