Devise Error Messages not showing up Bootstrap template - ruby-on-rails

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