Rails / Devise No Flash Messages generated when incorrect registration

Question

Trying to make Devise generate error messages if the registration is incorrect. For example, "Email cannot be empty" or "Password is too short."

When watching episode 210 of railscast, this does not seem to correspond to the functionality for Devise (via validatable), but in my case flash messages are not generated for registration. Note: Flash messages are generated in other instances of this application, such as sending reset instructions, deleting an account, etc. (Behavior can be seen on the ninjaspeak.com production website if you want to see for yourself)

Any thoughts on why this might be?

Using Devise 2.1.2 with Rails 3.2.13

devise.en.yml:

# Additional translations at https://github.com/plataformatec/devise/wiki/I18n

en:
  errors:
    messages:
      expired: "has expired, please request a new one"
      not_found: "not found"
      already_confirmed: "was already confirmed, please try signing in"
      not_locked: "was not locked"
      not_saved:
        one: "1 error prohibited this %{resource} from being saved:"
        other: "%{count} errors prohibited this %{resource} from being saved:"

  devise:
    failure:
      already_authenticated: 'You are already signed in.'
      unauthenticated: 'You need to sign in or sign up before continuing.'
      unconfirmed: 'You have to confirm your account before continuing.'
      locked: 'Your account is locked.'
      invalid: 'Invalid email or password.'
      invalid_token: 'Invalid authentication token.'
      timeout: 'Your session expired, please sign in again to continue.'
      inactive: 'Your account was not activated yet.'
    sessions:
      signed_in: ''
      signed_out: ''
    passwords:
      send_instructions: 'You will receive an email with instructions about how to reset your password in a few minutes.'
      updated: 'Your password was changed successfully. You are now signed in.'
      updated_not_active: 'Your password was changed successfully.'
      send_paranoid_instructions: "If your e-mail exists on our database, you will receive a password recovery link on your e-mail"
    confirmations:
      send_instructions: 'You will receive an email with instructions about how to confirm your account in a few minutes.'
      send_paranoid_instructions: 'If your e-mail exists on our database, you will receive an email with instructions about how to confirm your account in a few minutes.'
      confirmed: 'Your NinjaSpeak account was successfully confirmed. You are now signed in.'
    registrations:
      signed_up: 'Welcome! You have signed up successfully.'
      signed_up_but_unconfirmed: 'A message with a confirmation link has been sent to your email address. Please open the link to activate your NinjaSpeak account.'
      signed_up_but_inactive: 'You have signed up successfully. However, we could not sign you in because your account is not yet activated.'
      signed_up_but_locked: 'You have signed up successfully. However, we could not sign you in because your account is locked.'
      updated: 'You updated your account successfully.'
      update_needs_confirmation: "You updated your account successfully, but we need to verify your new email address. Please check your email and click on the confirm link to finalize confirming your new email address."
      destroyed: 'Your NinjaSpeak account was successfully cancelled.'
    unlocks:
      send_instructions: 'You will receive an email with instructions about how to unlock your account in a few minutes.'
      unlocked: 'Your account has been unlocked successfully. Please sign in to continue.'
      send_paranoid_instructions: 'If your account exists, you will receive an email with instructions about how to unlock it in a few minutes.'
    omniauth_callbacks:
      success: 'Successfully authorized from %{kind} account.'
      failure: 'Could not authorize you from %{kind} because "%{reason}".'
    mailer:
      confirmation_instructions:
        subject: 'Confirmation instructions'
      reset_password_instructions:
        subject: 'Reset password instructions'
      unlock_instructions:
        subject: 'Unlock Instructions'

application.html.erb:

<% flash.each do |name, msg| %>
  <%= content_tag :div, msg, id: "flash_#{name}" %>
<% end %>

user.rb:

class User < ActiveRecord::Base
  # Include default devise modules. Others available are:
  # :token_authenticatable, :lockable, :timeoutable and :activatable
  devise :database_authenticatable, :registerable, :confirmable,
         :recoverable, :rememberable, :trackable, :validatable

  # Setup accessible (or protected) attributes for your model
  attr_accessible :email, :password, :password_confirmation, :natives_language, :next_language, :remember_me, :bookmark
  # attr_accessible :title, :body

  validates_presence_of :natives_language, :next_language
end

, css:

#flash_alert {
padding-top: 16px;
float: right;
}

#flash_notice {
padding-top: 16px;
float: right;
}

Answer 1

/// new.html.erb.

<%= form_for(resource, :as => resource_name, :url => registration_path(resource_name)) do |f| %>

:

<%= devise_error_messages! %>

- , , " ", " " ..

Answer 2

---

, devise , , . .

, , " jquery-validation-rails" application.js javascript :

validation_jquery.js

//validador jquery
$('#new_user').validate({
  rules: {
    'user[password]': {
      required: true,
      maxlength: 100
    },
    'user[email]': {
      required: true, 
      email: true, 
      maxlength: 150
    }
  },
  messages: {
    'user[password]': {
        required: "Required Field",
        maxlength: "Name too big, max size 100"
    },
    'user[email]': {
        required: "Required Field",
        email: "Invalid email",
        maxlength: "Email too big, max size 150"
    }
  }
});

, css

validation_jquery.css

/* Change color to error messages for validation with jQuery */
label.error{
    color: white !important;
    font-weight: normal !important;
} 

  VALID_EMAIL_REGEX = /\A[\w+\-.]+@[a-z\d\-.]+\.[a-z]+\z/i

  validates :password, 
            presence: true, 
            length: { maximum: 100 }

  validates :email,
            presence: true,
            length: { maximum: 150 },
            format: { with: VALID_EMAIL_REGEX }

---------------------------

---

Rails

- , "X" "", UX.

<!-- Flash Notice for Rails notifications -->
  <% if notice %>
    <p class="alert alert-success">
      <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only" style="font-size: 14px !important;"> Close</span></button>
      <%= notice %>
    </p>
  <% end %>
  <% if alert %>
    <p class="alert alert-danger">
      <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only" style="font-size: 14px !important;"> Close</span></button>
      <%= alert %>
    </p>
  <% end %>

Super Cool Growlyflash

, Rails 3 4.1 , " growlyflash", -, . growlyflash, -, "application.html.erb":

<%= growlyflash_static_notices %>

, , javascript "growlyflash.js" ( ). .

Growlyflash.js

// The message will disappear when get clicked
jQuery(function() {
  $(document).on('click.alert.data-api', '[data-dismiss="alert"]', function(e) {
    return e.stopPropagation();
  });
  return $(document).on('touchstart click', ".bootstrap-growl", function(e) {
    e.stopPropagation();
    $('[data-dismiss="alert"]', this).click();
    return false;
  });
});


// This part of code is VERY IMPORTANT, because it solved an issue for rendering color
// to the danger message.
$.bootstrapGrowl.defaults = $.extend(true, {}, $.bootstrapGrowl.defaults, {
  type_mapping: {
    alert: 'warning',
    error: 'danger',
    notice: 'info',
    success: 'success'
  }
});

, : D

Answer 3

Well, it can be as simple as you did not apply the CSS style in your warning container (if you check your DOM when you think a flash message has appeared, you will probably find it there).

Below is what I use for my flash messages based on the type of message I want to print

<% flash.each do |name, msg| %>
  <% if msg.is_a?(String) %>
    <div class="alert alert-<%= name.to_s == 'notice' ? 'success' : 'danger' %>">
      <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
      <%= content_tag :div, msg, :id => "flash_#{name}" %>
   </div>
 <% end %>
<% end %>