#39* Use background color to show error fields ins

最新推荐文章于 2024-02-07 16:34:28 发布

原创最新推荐文章于 2024-02-07 16:34:28 发布 · 77 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Rails #HTML

Railscasts 专栏收录该内容

108 篇文章

订阅专栏

本文介绍了一种在Rails应用中改进字段错误样式的技巧。通过改变背景颜色而非添加边框来突出显示有问题的输入字段，避免了布局偏移。文中提供了一个自定义的field_error_proc实现方法，适用于追求像素级完美的前端布局。

Using the default rails field_error_proc may lead to some layout headaches--your form looks perfect until, uh-oh, someone entered an invalid email address and Rails adds a fieldWithError-styled div that wraps around the problem field.

While this works in many cases, some pixel-perfect layouts may not be able to tolerate the 2-pixel padding around the text_field caused by the red border. An alternative is to change the background color of the offending field.

Include the following code in environment.rb (or use a "require" like I do):

ActionView::Base.field_error_proc = Proc.new do |html_tag, instance|
       error_style = "background-color: #ffff80"
       if html_tag =~ /<(input|textarea|select)[^>]+style=/
         style_attribute = html_tag =~ /style=['"]/
         html_tag.insert(style_attribute + 7, "#{error_style}; ")
       elsif html_tag =~ /<(input|textarea|select)/
         first_whitespace = html_tag =~ /\s/
         html_tag[first_whitespace] = " style='#{error_style}' "
      end
      html_tag
    end