Devise Error Messages not showing up Bootstrap template

Question

I am using a Wrapbootstrap downloaded template, with devise for user registration and log in but am not getting any errors to pop up.

In all my views for devise I am calling <%= devise_error_messages! %>

In my model the following validations:

    validates :first_name, presence: true
    validates :last_name, presence: true
    validates :phone_number, presence: true

Here is my Devise_helper.rb

    module DeviseHelper
   def devise_error_messages!
   return '' if resource.errors.empty?

    messages = resource.errors.full_messages.map { |msg| content_tag(:li, msg) }.join
    html = <<-HTML
   <div class="alert alert-error alert-block"> <button type="button"
    class="close" data-dismiss="alert">x</button>
   #{messages}
    </div>
    HTML

    html.html_safe
   end
 end

Here is my Registration New view page:

          <!--=== Content Part ===-->
         <div class="container content">
         <div class="row">
         <div class="col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
         <form class="reg-page">
         <div class="reg-header">
         <h2>Register a new account</h2>
         <p>Already Signed Up? Click <%= link_to "Sign In", login_url %> to login your account.</p>
         </div>
        <%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
        <%= devise_error_messages! %>

        <label>First Name<span class="color-red">*</span></label>
        <%= f.text_field :first_name, autofocus: true, :class=> "form-control margin-bottom-20" %>

        <label>Last Name<span class="color-red">*</span></label>
        <%= f.text_field :last_name, autofocus: true, :class=> "form-control margin-bottom-20" %>

        <label>Phone Number<span class="color-red">*</span></label>
        <%= f.text_field :phone_number, autofocus: true, :class=> "form-control margin-bottom-20" %>

        <label>Email Address <span class="color-red">*</span></label>
        <%= f.email_field :email, autofocus: true, :class=> "form-control margin-bottom-20" %>

        <div class="row">
        <div class="col-sm-6">
        <label>Password <span class="color-red">*</span></label>
        <% if @validatable %>
        <em>(<%= @minimum_password_length %> characters minimum)</em>
        <% end %>
        <%= f.password_field :password, autocomplete: "off", :class=> "form-control margin-bottom-20" %>
      </div>

        <div class="col-sm-6">
        <label>Confirm Password <span class="color-red">*</span></label>
        <%= f.password_field :password_confirmation, autocomplete: "off",:class=> "form-control margin-bottom-20" %>
        </div>
        </div>

         <hr>

         <div class="row">
         <div class="col-lg-6 text-right">
         <%= f.submit "Sign up", :class=> "btn-u" %>
         </div>
        </div>
        </form>
        </div>
        </div>
        <% end %>
        </div><!--/container-->
        <!--=== End Content Part ===-->

And when I submit an uncomplete form a query string like this is generated: http://localhost:3000/login?utf8=%E2%9C%93&authenticity_token=v%2BKndd3om3fBChpsZ6riw%2FVBiVM1ehVbKgBF9tIlg6PB6p30oei7OU3toqthjU1TY67yI3gmzjigxGe5DWfX7w%3D%3D&user%5Bemail%5D=&user%5Bpassword%5D=fwf&user%5Bremember_me%5D=0&commit=Log+in

Answer 1

Try with this in your helper file:

message_html << "<div class="alert alert-error alert-block"> <button type="button" class="close" data-dismiss="alert">x</button>"
message_html.html_safe

Also, check for flash message in your layout page or corresponding login page as:

  <% if flash[:alert] %>
    <span class='flash_error'> <%= flash[:alert] %></span>
  <% end %>

Answer 2

There reason for this was because the template I was using had its own Javascript for error messages that was overriding the error messages of devise. Both error messages were not showing up until I removed the JS included in the Wrapbootstrap template and it works now