#263 Client Side Validations

Apr 25, 2011 | 8 minutes | Plugins, Forms

Showing validation errors inline as the user is filling out the form can lead to a better use experience. Learn how to do this using the Client Side Validations gem.

Click to Play Video ▶

Download:
source codeProject Files in Zip (282 KB)
mp4Full Size H.264 Video (21.1 MB)
m4vSmaller H.264 Video (11.5 MB)
webmFull Size VP8 Video (24.1 MB)
ogvFull Size Theora Video (26.2 MB)

Browse Source Code

Resources

          bash
        
bundle
rails g client_side_validations:install

          Gemfile
        
gem 'client_side_validations'

          models/user.rb
        
validates_uniqueness_of :username, :email
validates :email, :email_format => true

          lib/email_format_validator.rb
        
class EmailFormatValidator < ActiveModel::EachValidator
  def validate_each(object, attribute, value)
    unless value =~ /^([^@\s]+)@((?:[-a-z0-9]+\.)+[a-z]{2,})$/i
      object.errors.add(attribute, :email_format, options)
    end
  end
end

          config/application.rb
        
config.autoload_paths << "#{config.root}/lib"

          users/_form.html.erb
        
<%= form_for @user, :validate => true do |f| %>

          layouts/application.html.erb
        
<%= javascript_include_tag :defaults, "rails.validations", "rails.validations.custom" %>

          locals/en.yml
        
en:
  errors:
    messages:
      email_format: "is not formatted properly"

          rails.validations.custom.js
        
clientSideValidations.validators.local["email_format"] = function(element, options) {
  if (!/^([^@\s]+)@((?:[-a-z0-9]+\.)+[a-z]{2,})$/i.test(element.val())) {
    return options.message;
  }
}