Question

I have started using Simple-form and Bootstrap and I have tried to follow this reference: Simple form + Bootstrap but I don’t know what is going on because when a field is failing, here is what happens:

Regarding this screenshot I have a question:
1) As you see, the Price field is not being red surrounded. How can I do that?
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 the code in your reference is somewhat misleading and incorrect insofar as error notifications go.

Change:

<% 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 fix the asymmetry in the error alert box (by fixing the resultant markup).

In order to troubleshoot the issue with your validation error not displaying in red, you’ll have to share the markup so we can see what’s going on.