Skip to content
Create a gist now

Instantly share code, notes, and snippets.

Fancier client_side_validations Callbacks for element validation
<!DOCTYPE html>
<title><%= content_for?(:title) ? yield(:title) : "Untitled" %></title>
<%= stylesheet_link_tag "application" %>
<%= javascript_include_tag :defaults, 'rails.validations', 'rails.validations.callbacks' %>
<%= csrf_meta_tag %>
<%= yield(:head) %>
<div id="container">
<% flash.each do |name, msg| %>
<%= content_tag :div, msg, :id => "flash_#{name}" %>
<% end %>
<%= content_tag :h1, yield(:title) if show_title? %>
<%= yield %>
# it is important the following is disabled!
# JavaScript files you want as :defaults (application.js is always included).
# config.action_view.javascript_expansions[:defaults] = %w(jquery rails)
source ''
gem 'rails', '3.0.7'
gem 'sqlite3'
# gem 'nifty-generators'
# gem 'bcrypt-ruby', :require => 'bcrypt'
gem 'jquery-rails', '1.0.5'
gem 'client_side_validations'
$ rails generate jquery:install --ui
remove public/javascripts/prototype.js
remove public/javascripts/effects.js
remove public/javascripts/dragdrop.js
remove public/javascripts/controls.js
copying jQuery (1.6.1)
force public/javascripts/jquery.js
force public/javascripts/jquery.min.js
copying jQuery UI (1.8.12)
force public/javascripts/jquery-ui.js
force public/javascripts/jquery-ui.min.js
copying jQuery UJS adapter (a634e7)
remove public/javascripts/rails.js
create public/javascripts/jquery_ujs.js
$ rails g client_side_validations:install
create config/initializers/client_side_validations.rb
create public/javascripts/rails.validations.js
Client Side Validations
Currently Client Side Validations only
works with jQuery. You'll need to require
jQuery in your layout file before you
require 'rails.validations.js'
// You will need to require 'jquery-ui' for this to work
// public/javascripts/rails.validations.callbacks.js = function(element, message, callback) {
if ('valid') !== false) {
element.parent().find('.message').hide().effect('highlight', {}, 2000);
element.animate( { backgroundColor: "#ffffcc" }, 1000);
clientSideValidations.callbacks.element.pass = function(element, callback) {
// Take note how we're passing the callback to the hide()
// method so it is run after the animation is complete.
element.parent().find('.message').effect('fade', {}, 2000, callback);
element.animate( { backgroundColor: "#ffffff" }, 1000, callback);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.