首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >Rails 3:“带错误的字段”包装器更改页面外观。如何避免这种情况?

Rails 3:“带错误的字段”包装器更改页面外观。如何避免这种情况?
EN

Stack Overflow用户
提问于 2011-03-11 09:23:55
回答 12查看 49.2K关注 0票数 134

电子邮件字段:

代码语言:javascript
复制
<label for="job_client_email">Email: </label> 
<input type="email" name="job[client_email]" id="job_client_email">

看起来像这样:

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

代码语言:javascript
复制
<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>

它看起来像这样:

我怎样才能避免这种外观变化?

EN

回答 12

Stack Overflow用户

回答已采纳

发布于 2011-03-11 09:45:43

您应该覆盖ActionView::Base.field_error_proc。目前在ActionView::Base中是这样定义的

代码语言:javascript
复制
 @@field_error_proc = Proc.new{ |html_tag, instance| 
   "<div class=\"field_with_errors\">#{html_tag}</div>".html_safe
 }

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

代码语言:javascript
复制
config.action_view.field_error_proc = Proc.new { |html_tag, instance| 
  html_tag
}

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

票数 238
EN

Stack Overflow用户

发布于 2011-03-11 09:38:35

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

代码语言:javascript
复制
.field_with_errors { display: inline; }
票数 102
EN

Stack Overflow用户

发布于 2011-12-05 10:29:21

我目前使用这个解决方案,放在一个初始化器中:

代码语言:javascript
复制
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

这允许我只向适当的标记添加一个类名,而不需要创建额外的元素。

票数 72
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/5267998

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档