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

Question

如何在Rails 3.1中的验证错误失败的字段中显示表单字段突出显示？我知道脚手架会自动生成css和控制器代码来处理这个问题,但我想知道是否有办法手动生成它.我已经通过以下方式实现了错误消息的字符串显示:@ user.errors.full_messages.each ...等,但我无法让字段以红色突出显示.有任何想法吗？

谢谢.

Answer 1

假设您的CSS文件中的字段有错误类:

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

这是你想要的吗？

额外:这是关于自定义默认ActiveRecord验证CSS的部分.

编辑:( 关于额外的ifs)

# 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) %>
[...]

(我可能在那里犯了一个错误 - 我正在写一个电话 - 但你得到了一般的想法.你可以用多种方式编码这个=无穷大,所以按你喜欢的方式做...)

Answer 2

现在，Rails袖手旁观。当error发生这种情况时，Rails会在错误字段周围放置div一个类.field_with_errors。因此，现在您只需定位该类并添加样式即可。

要专注于您可以做的输入

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

此CSS将在input元素周围放置一条漂亮的红线，同时important!将覆盖所有现有样式。