Devise Error Messages Twitter Bootstrap style
Create file named:
/app/helpers/devise_helper.rb
Add the following code:
module DeviseHelper
def devise_error_messages!
return '' if resource.errors.empty?
messages = resource.errors.full_messages.map { |msg| content_tag(:li, msg) }.join
sentence = I18n.t('errors.messages.not_saved',
count: resource.errors.count,
resource: resource.class.model_name.human.downcase)
html = <<-HTML
<div class="alert alert-error alert-block">
<button type="button" class="close" data-dismiss="alert">x</button>
<h4>#{sentence}</h4>
#{messages}
</div>
HTML
html.html_safe
end
end
Written by Pierre-Louis Gottfrois
Related protips
9 Responses

Nice, this was just what I was looking for. Thanks!

Exactly what I needed. Thanks.

Thanks, day-saving elegant time-saver

Perfect. Thanks

Very sweet .. helped me nicely! Thanks.

This is great, thanks. I made some changes to the HTML and ended up with this:
html = <<-HTML
<div class="alert alert-error alert-block">
<strong>#{sentence}</strong>
<ul>
#{messages}
</ul>
</div>
HTML
</pre></code>
- The <h4> looks too large to me, even in Bootstrap's documentation. I replaced it with <strong>
- #{messages} is a group of <li> elements, and it needed to be wrapped in a <ul>
</p></div><h1>

Awesome. Perfect.

thanks for this helper code.

As this is still a high rated answer when googling, but yet 2 years old, I would like to update the classes which worked for me.
I'm using SB Admin 2 btw.
<div class="alert alert-danger alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">x</button>
</code>