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

Posted

技术标签:

【中文标题】如何在 Rails 验证错误中突出显示字段【英文标题】:How to Highlight Fields on Rails Validation Errors 【发布时间】:2012-08-26 16:31:29 【问题描述】:

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

谢谢。

【问题讨论】:

【参考方案1】:

假设您的 CSS 文件中的字段有一个 error 类:

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

这是你想要的吗?

额外:here's a section about customizing default ActiveRecord validations 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) %>
[...]

(我可能在那里犯了一个错误 - 我正在用手机写 - 但你明白了。你可以用多种方式编码这个 = 无限,所以按照你喜欢的方式去做。 ..)

【讨论】:

谢谢。这行得通,但这意味着我必须为每个表单字段做一个 if... 查看编辑。我敢打赌,如果你愿意,你甚至可以内联编码。或者您甚至可以覆盖 label 本身,而不必编写任何额外的字符。 我喜欢这段代码并且已经使用了一段时间了。对于那些节省空间的人来说,这是更少的行...resource.errors[field_name].present? ? "error".html_safe : "".html_safe 现在有这个方法@user.errors.include?(:name)api.rubyonrails.org/classes/ActiveModel/…【参考方案2】:

Rails 现在有一个绝妙的技巧。当出现error 时,rails 在错误字段周围放置一个带有.field_with_errors 类的div。所以现在您可以只定位该类并添加样式。

专注于你可以做的输入

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

这个 css 将在 input 元素周围放置一条漂亮的红线,而 important! 将覆盖任何现有样式。

【讨论】:

太棒了!这太简单了!非常感谢【参考方案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 结尾 结束

【讨论】:

或者你可以使用present?方法:if resource.errors[field_name].present?

以上是关于如何在 Rails 验证错误中突出显示字段的主要内容,如果未能解决你的问题,请参考以下文章

发生验证错误时,在JSF中突出显示inputText

在extjs中显示服务器端验证错误

验证和突出显示表单字段

ASP.net MVC 验证突出显示和不正确字段上的图标 Jquery

在记事本++中突出显示xml验证错误

如果无效,则需要对具有字段突出显示的字段组进行角度动态验证