Question

I am using validates_acceptance_of :terms, :message => "must be accepted" in my user.rb model, and am using bootstrap-sass.

My check box code looks like this in the view:

<div class="control-group">
  <%= f.label :terms, :class => "control-label" do %>
    Accept <%= link_to('Terms of Use *', "#myTOUModal", :"data-toggle" => "modal") %>
  <% end %>
  <div class="controls">
    <%= f.check_box :terms %>
  </div>
</div>

For some reason, when the terms check box isn’t selected on form submission, the appropriate error message shows up at the top of the form, but there is a problem with the field_with_errors div class wrapping around the check box label.

The HTML for the rendered page looks like this:

<div class="control-group">
  <label class="control-label" for="user_terms">
    Accept <a href="#myTOUModal" data-toggle="modal">Terms of Use *</a>
  </label>
  <div class="controls">
    <input name="user[terms]" type="hidden" value="0" />
    <div class="field_with_errors">
      <input id="user_terms" name="user[terms]" type="checkbox" value="1" />
    </div>
  </div>
</div>

The result is that the check box field label isn’t highlighted on error. Is there a way to force the div tag placement for the field_with_errors class to show up just after the <div class="control-group"> tag? Why does using a block to define a field label throw off the field_with_errors tag placement? Does anyone have experience with this?

Thank you

Answer 1

This is a bug i think. The problem is in block. Define your label without block and everything works.

Try something like:

<% modal_html = capture do >
  Accept <%= link_to('Terms of Use *', "#myTOUModal", :"data-toggle" => "modal") %>
<% end %>

<%= f.label :terms, modal_html, :class => "control-label" %>

Or helper:

def modal_html
  #Q{Accept #{link_to('Terms of Use *', "#myTOUModal", :"data-toggle" => "modal")} }.html_safe
end