Last Updated: February 25, 2016
·
14.83K
· gottfrois

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

9 Responses
Add your response

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

over 1 year ago ·

Exactly what I needed. Thanks.

over 1 year ago ·

Thanks, day-saving elegant time-saver

over 1 year ago ·

Perfect. Thanks

over 1 year ago ·

Very sweet .. helped me nicely! Thanks.

over 1 year ago ·

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>

over 1 year ago ·

Awesome. Perfect.

over 1 year ago ·

thanks for this helper code.

over 1 year ago ·

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>

over 1 year ago ·