3

When I try to create a category by using Ajax I get a strange behavior with my error message.

Right now I have my error message appearing like this:

enter image description here

My create.js.erb and new.js.erb both have the same code which is just this line:

$(".cc-form").html("<%= escape_javascript(render(:partial => 'categories/form', locals: { category: @category })) %>");

This is my category form:

<%= form_for(@category, :remote => true, :html => { :class => "add-form", :id => "cform" }) do |f| %>
<fieldset>
   <p>
      <%= f.label :name, "Category Name *" %>
      <br />
      <%= f.text_field :name %>
   </p>
   <div class="form-actions">
     <%= f.submit "Create" %>
   </div>
</fieldset>

Here is the code to enable custom error HTML:

# application.rb

ActionView::Base.field_error_proc = Proc.new do |html_tag, instance|
   errors = Array(instance.error_message).join(',')
   %(#{html_tag}<span class="validation-error">&nbsp;#{errors}</span>).html_safe
end

Then the HTML itself along with the error HTML:

<p>
  <label for="category_name">Category Name *</label><span class="validation-error">&nbsp;can't be blank</span>
  <br>
  <input id="category_name" name="category[name]" size="30" type="text" value=""><span class="validation-error">&nbsp;can't be blank</span>
</p>

I only want the error message next to the label and not the right side of the input. How would I do this? The format is tricky for me when I look at it.

Thanks.

LearningRoR
  • 26,582
  • 22
  • 85
  • 150

2 Answers2

1

I guess you use field_error_proc badly, because it's good to wrap the input field into element with special class. Field_error_proc tags both the label and input tag with field_with_error by default since the refered object (:name that means category.name having the errors array) is the same. It's not a defect, because it's good for changing your label's color to red in this case. I checked the Rails code (actionpack/lib/action_view/helpers/tags/label.rb) and you can't turn this behavior off for labels (it can be a feature request), so I guess there's only one solution for your problem if you use plain html for labels.

I have two solutions now for your problem:

  • Instead of

    <%= f.label :name, "Category Name *" %>

    use

    <label for="category_name">Category Name *</label>

    in your view.

  • It's not too nice, but you can use f.label if you make form .label .validation-error { display: none } in your stylesheet file. I know it's just a workaround, but if f.label is necessary, then I don't know better solution.

Nucc
  • 1,031
  • 6
  • 20
  • Or you can check the html tag in your field_error_proc like in this post: http://stackoverflow.com/questions/8023548/overriding-actionviewbase-field-error-proc-in-refinerycms – Nucc Aug 12 '12 at 10:10
0

You have two of these <span> tags in the page:

<span class="validation-error">&nbsp;can't be blank</span>

EDIT:

Okay, it looks like both the label and the input need to be wrapped with a custom error. Here are a couple of links:

http://stackoverflow.com/questions/5267998/rails-3-field-with-errors-wrapper-changes-the-page-appearance-how-to-avoid-t

https://gist.github.com/1464315

jn29098
  • 1,405
  • 1
  • 15
  • 25
  • That's how it renders it. How do I change up the error html to only do it by the label? The error html is confusing to me. – LearningRoR Aug 04 '12 at 12:46
  • Could you not remove the 2nd tag? Because you have two of the same exact spans they are both affected with any changes that your javascript and/or css make to them. You'd have to give them different ID's or classes. – jn29098 Aug 04 '12 at 12:53
  • Oh wait, I see. Rails is rendering two of those tags for you. Is that correct? – jn29098 Aug 04 '12 at 12:55