Rails 验证 |将类添加到周围的 <div>答案

【问题标题】：Rails Validation | add class to surrounding <div>Rails 验证 |将类添加到周围的 <div>
【发布时间】：2009-10-20 02:40:46
【问题描述】：

Rails 问题。错误验证的默认行为是在输入字段周围使用 fieldWithError 样式的 div，如下所示

<div class="type-text" id="pre_negotiation_value_div">
<label for="contract_budget_holder">Budget Holder</label>
<div class="fieldWithErrors">
<input id="contract_budget_holder"name="contract[budget_holder]" size="30" type="text" value="" />
</div>
</div>

我想要完成的是，用分类的 div 标签包围标签和输入字段，如下所示：

<div class="type-text fieldWithErrors" id="pre_negotiation_value_div">
<label for="contract_budget_holder">Budget Holder</label>      
<input id="contract_budget_holder"name="contract[budget_holder]" size="30" type="text" value="" />      
</div>

任何想法如何做到这一点？你能把 javascript 连接到 ActionView::Base.field_error_proc 中吗？

我是 Rails 新手，如果这非常简单，我深表歉意！

感谢您的帮助。

乔纳森

【问题讨论】：

标签： ruby-on-rails validation

【解决方案1】：

完全按照自己的意愿去做并不容易，但如果你有这样的 ERB：

<div id="pre_negotiation_value_div" class="type-text">
  <%= f.label :name %>
  <%= f.text_field :name %>
</div>

你会得到这样的 HTML：

<div id="pre_negotiation_value_div" class="type-text">
  <div class="fieldWithErrors"><label for="foo_name">Name</label></div>
  <div class="fieldWithErrors"><input id="foo_name" name="foo[name]" size="30" type="text" value="" />
</div>

label 和 text_field 周围都有 fieldWithErrors div。根据您想要的样式，这可能就足够了。如果还不够好，您将不得不像这样做一个自定义助手：

class ActionView::Helpers::FormBuilder
  def labeled_input(method, options={}, &block)
    (options[:class] ||= "") << " fieldWithErrors" if @object.errors.on(method)
    ActionView::Helpers::InstanceTag.send(:alias_method, :original_error_wrapping, :error_wrapping)
    ActionView::Helpers::InstanceTag.send(:define_method, :error_wrapping,
      Proc.new {|html_tag, has_error| html_tag})
    @template.concat(@template.content_tag(:div, @template.capture(&block), options))
  ensure
    ActionView::Helpers::InstanceTag.send(:alias_method, :error_wrapping, :original_error_wrapping)
    ActionView::Helpers::InstanceTag.send(:remove_method, :original_error_wrapping)
  end
end

把它放在config/initializers/labeled_input.rb。这是一堆 Ruby meta-foo，但它所做的是将“fieldWithErrors”类放在外部 div 上。它暂时重新定义了InstanceTag 的error_wrapping 方法，以便内部标签和text_field 标签没有围绕它们的“fieldWithErrors”div。你可以像这样在 ERB 中使用它：

<% f.labeled_input :name, :id => "pre_negotiation_value_div", :class => "type-text" do %>
  <%= f.label :name %>
  <%= f.text_field :name %>
<% end %>

【讨论】：

那个工作的人。谢谢！！我从来没有想过。

【解决方案2】：

RAILS 3 更新

我正在将我的应用程序更新到 rails 3。如果您已使用此方法并正在升级，您会收到一些弃用警告，并且表单字段会出现两次或多次。

解决这些问题：

1) 更改labeled_input.rb 中检查错误的行。这会停止访问错误的弃用警告：

(options[:class] ||= "") << " fieldWithErrors" unless @object.errors[method].empty?

2) 更改labeled_input.rb 中'ensure'之前的行。这会阻止表单元素多次出现：

@template.content_tag(:div, @template.capture(&block), options)

3) 在调用labeled_input 的视图文件中，使用

希望能为您节省一些时间。

【讨论】：