client side validation not loading

Question

I am following the rails cast 263 on client side valuation. I have the code in place, though it is not validating the errors live for me. The errors only show after submitting the form.

application.html.erb:

  <%= stylesheet_link_tag "application", :media => "all" %>
  <%= javascript_include_tag "application" %>
  <%= javascript_include_tag :defaults, "rails.validations" %>
  <%= csrf_meta_tags %>

client_side_validations.rb:

 ActionView::Base.field_error_proc = Proc.new do |html_tag, instance|
   unless html_tag =~ /^<label/
     %{<div class="field_with_errors">#{html_tag}<label for="#{instance.send(:tag_id)}" class="message">#{instance.error_message.first}</label></div>}.html_safe
   else
     %{<div class="field_with_errors">#{html_tag}</div>}.html_safe
   end
 end

form.html.erb:

<%= form_for @user, :validate => true do |f| %>
  <% if @user.errors.any? %>
    <div class="error_messages">
      <h2>Form is invalid</h2>
      <ul>
        <% @user.errors.full_messages.each do |message| %>
          <li><%= message %></li>
        <% end %>
      </ul>
    </div>
  <% end %>

    <div class="field">
        <%= f.label :email %><br/>
        <%= f.text_field :email %>
    </div>
    <div class="field">
        <%= f.label :password %><br/>
        <%= f.password_field :password %>
    </div>
    <div class="field">
        <%= f.label :username %><br/>
        <%= f.text_field :username %>
    <div class="field">
        <%= f.label :zip_code %><br/>
        <%= f.text_field :zip_code %>
    </div>
    </div>

application.js:

//= require jquery
//= require jquery.ui.all
//= require jquery_ujs
//= require jquery.magnific-popup.js
//= require jquery.purr
//= require rails.validations
//= require best_in_place
//= require_tree .

Answer 1

Original Suggestion: Link to JS in application.js.

Rather than linking to the rails.validations.js from application.html.erb:

<%= javascript_include_tag :defaults, "rails.validations" %>

You may want to do this in your app/assets/javascripts/application.js file:

//= require rails.validations

That's how I connect into additional JavaScript files.

I don't know much about Rails 2, but I think that there was a shift in Rails 3 so that now application.html.erb is used to link to application.js and then all other JS files are linked to from there. It looks like :default might not work how it used to. RailsCasts are super helpful but some of the episodes that were created a few years ago have code samples that have changed in recent versions of Rails.

Edit 1: Make sure rails.validations.js was installed into app/assets/javascripts.

In the RailsCast the rails g client_side_validations:install command puts rails.validations.js into the project. Apparently this doesn't always work and you can call rails g client_side_validations:copy_assets to get it dropped into app/assets/javascripts (See: Can't include js file for client slide validation).

Edit 2: In Rails 4, fix compatibility bugs.

It looks like client_side_validations doesn't work in Rails 4 and the gem is no longer maintained (See: https://github.com/bcardarella/client_side_validations).

In Rails 3, in action_view\helpers\form_helper.rb, the apply_form_for_options! method is:

def apply_form_for_options!(object_or_array, options)

In Rails 4, it is:

def apply_form_for_options!(record, object, options)

If you look at the client_side_validations code, its version is:

def apply_form_for_options!(object_or_array, options)
  super
  options[:html][:validate] = true if options[:validate]
end

That matches the Rails 3 definition. We only get two arguments but then we call super which blows up because Rails 4 expects three arguments.

If you are feeling brave, you could fork the client_side_validations gem and work through these Rails-4-compatibility issues. But I would suspect that there might be quite a few pieces to update since this gem had to be so tightly integrated with the FormHelper.

Sorry that doesn't immediately solve your problem. Good luck!