Rails: simple form + loading tray - when errors, fields do not turn red

Question

I started using Simple-Form and Bootstrap, and I tried to follow this link: Simple Form + Bootstrap , but I don’t know what happens, because when the field does not work, this is what happens:

Regarding this screenshot, I have a question:
1) As you can see, the Price field is not surrounded by red. How can i do this? Here is my code for the form:

<%= simple_form_for @lesson, :html => { :class => 'well' } do |lesson_form| %> <% if lesson_form.error_notification %> <div class="alert alert-error fade in"> <a class="close" data-dismiss="alert" href="#">&times;</a> <%= lesson_form.error_notification %> </div> <% end %> <%= lesson_form.input :title %> <%= lesson_form.input :category %> <%= lesson_form.input :description %> <%= lesson_form.input :price %> <%= lesson_form.button :submit, :label => 'Create', :class => 'btn btn-primary btn-large' %> <% end -%> 

Answer 1

I believe that the code in your link is somewhat misleading and incorrect as error messages are sent.

Edit:

 <% if lesson_form.error_notification %> <div class="alert alert-error fade in"> <a class="close" data-dismiss="alert" href="#">&times;</a> <%= lesson_form.error_notification %> </div> <% end %> 

to, simply:

 <%= lesson_form.error_notification %> 

Then in config/locals/simple_form.en.yml change default_message to:

 default_message: '<a class="close" data-dismiss="alert">&times;</a>Some errors were found, please take a look:' 

This will eliminate the asymmetry in the error warning field (by correcting the resulting markup).

To fix the problem when the validation error is not displayed in red, you will have to separate the markup so that we can see what is happening.

Answer 2

Look at the text next to the price field. Simple to place errors next to the field.

To clear the forms, try the following:

Remove this, it is not needed with a pearl of simple shape:

 <% if lesson_form.error_notification %> <div class="alert alert-error fade in"> <a class="close" data-dismiss="alert" href="#">&times;</a> <%= lesson_form.error_notification %> </div> <% end %> 

Change :html => { :class => 'well' } to :html => { :class => 'well form-horizontal' }

This will improve your form and apply bootstrap css to error fields and text.