client_side_validations 'Cannot read property 'user[email]' of undefined'

Question

So I am trying to get client_side_validations gem working and when I tab out of my email field, I get this error:

Uncaught TypeError: Cannot read property 'user[email]' of undefined 

This is my form helper:

<%= form_for(resource, :as => resource_name, :class => "send-with-ajax", :url => user_registration_path(resource), :validate => true) do |f| %>
      <%= f.email_field :email, :id => "form-email", :placeholder => "[email protected]", :input_html => {:autofocus => true}, :validate => true %>                
      <%= f.submit :label => "Submit", :value => "Sign Me Up!"  %>
      <div class="ajax-response"><%= devise_error_messages! %></div>
<% end %>

Which generates this HTML:

<form accept-charset="UTF-8" action="/users" class="new_user" data-validate="true" id="new_user" method="post" novalidate="novalidate">
     <input name="utf8" type="hidden" value="&#x2713;" />
     <input name="authenticity_token" type="hidden" value="9JdqaiushdauhsdioauhdoiuhNLSAVCGrc+PLJAQ=" />
     <input data-validate="true" id="form-email" input_html="{:autofocus=&gt;true}" name="user[email]" placeholder="[email protected]" size="30" type="email" />
     <input label="Submit" name="commit" type="submit" value="Sign Me Up!" />
     <div class="ajax-response"></div>
</form>

Edit 1: Even when I change the form helper from f.email_field :email, to f.text_field :email...I am still getting this error.

Answer 1

So I found the solution, it seems that either client_side_validations or devise are altering the id of the form - which would break the JS validation.

So the solution is to enforce the id of the form, so my form_for helper now looks like this:

<%= form_for(resource, :as => resource_name, :class => "send-with-ajax", :url => user_registration_path(resource), :validate => true, :html => { :id => 'user_new' }) do |f| %>

I found this solution here.