TypeError: Object [object Object] has no method 'enableClientSideValidations'

[alonsogarciapablo]

Hello,

First of all... thanks for this gem! I have been using it for a while for this form and everything was working perfectly. Yesterday I decided to update the app to:

* client_side_validations (3.2.1)
* rails (3.2.10)

My model validations are:

class Job < ActiveRecord::Base

  validates_presence_of :title, :description, :contact_info, :company_name, :company_url, :locality, :country
  validates_format_of :company_url, :with => /^(http|https):\/\/[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(([0-9]{1,5})?\/.*)?$/i, :allow_nil => true, :allow_blank => true
  validates_length_of :title, :minimum => 10, :maximum => 50, :allow_blank => true
  validates_length_of :description, :minimum => 50, :allow_blank => true

end

The form template is similar to:

= form_for @job, :validate => true do |f|

  .step1
    %fieldset
      %legend Información de la oferta

      %p.field.title
        = f.label :title, 'Puesto'
        = f.text_field :title

       # Some more fields in here...

And this is the resulting HTML and script tag.

<form accept-charset="UTF-8" action="/jobs" class="new_job" data-validate="true" id="new_job" method="post" novalidate="novalidate"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="secret" /></div>
<div id='steps'>
  <ol>
    <li class='current'>Rellenar oferta</li>
    <li>Previsualizar</li>
    <li>Publicar</li>
  </ol>
</div>
<div class='step1'>
  <fieldset>
    <legend>Información de la oferta</legend>
    <p class='field title'>
      <label for="job_title">Puesto</label>
      <input id="job_title" name="job[title]" size="30" type="text" />
    </p>
    <p class='field company_name'>
      <label for="job_company_name">Nombre de la empresa</label>
      <input id="job_company_name" name="job[company_name]" size="30" type="text" />
    </p>
    <p class='field company_url last'>
      <label for="job_company_url">Web de la empresa</label>
      <span class='help'>
        EJ: http://wadus.com
      </span>
      <input id="job_company_url" name="job[company_url]" size="30" type="text" />
    </p>
    <p class='field locality'>
      <label for="job_locality">Localidad</label>
      <input id="job_locality" name="job[locality]" size="30" type="text" />
    </p>
    <p class='field country last'>
      <label for="job_country">País</label>
      <input id="job_country" name="job[country]" size="30" type="text" />
    </p>
    <p class='field description'>
      <label for="job_description">Descripción</label>
      <span class='help'>
        ¿En qué consiste el puesto de trabajo? funciones, experiencia, etc.
      </span>
      <textarea cols="80" id="job_description" name="job[description]" rows="15">
      </textarea>
    </p>
    <p class='field contact_info'>
      <label for="job_contact_info">Información de contacto</label>
      <span class='help'>
        ¿Cómo puedo ponerme en contacto con la empresa?
      </span>
      <textarea cols="80" id="job_contact_info" name="job[contact_info]" rows="5">
      </textarea>
    </p>
  </fieldset>
</div>
<div class='step2' id='job_preview'></div>
<div class='step3'>
  <fieldset>
    <p class='field'>
      <label>Captcha</label>
      <span class='help'>Porque no nos gustan los robots</span>
      <textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
    </p>
  </fieldset>
</div>
<p class='actions'>
  <a href="/" class="cancel button">Cancelar</a>
  <input class="button" name="commit" type="submit" value="Publicar" />
</p>
</form>
<script>//<![CDATA[
if(window.ClientSideValidations==undefined)window.ClientSideValidations={};if(window.ClientSideValidations.forms==undefined)window.ClientSideValidations.forms={};window.ClientSideValidations.forms['new_job'] = {"type":"ActionView::Helpers::FormBuilder","input_tag":"<span class=\"field_with_errors\"><span id=\"input_tag\" /><label for=\"\" class=\"message\"></label></span>","label_tag":"<span class=\"field_with_errors\"><label id=\"label_tag\" /></span>","validators":{"job[title]":{"presence":[{"message":"no puede estar en blanco"}],"length":[{"messages":{"minimum":"es demasiado corto (10 caracteres m\u00ednimo)","maximum":"es demasiado largo (50 caracteres m\u00e1ximo)"},"allow_blank":true,"minimum":10,"maximum":50}]},"job[company_name]":{"presence":[{"message":"no puede estar en blanco"}]},"job[company_url]":{"presence":[{"message":"no puede estar en blanco"}],"format":[{"message":"no es v\u00e1lido","with":/^(http|https):\/\/[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(([0-9]{1,5})?\/.*)?$/i,"allow_blank":true}]},"job[locality]":{"presence":[{"message":"no puede estar en blanco"}]},"job[country]":{"presence":[{"message":"no puede estar en blanco"}]},"job[description]":{"presence":[{"message":"no puede estar en blanco"}],"length":[{"messages":{"minimum":"es demasiado corto (50 caracteres m\u00ednimo)"},"allow_blank":true,"minimum":50}]},"job[contact_info]":{"presence":[{"message":"no puede estar en blanco"}]}}};
//]]></script>

It was working :+1:, but after the update I ran into some issues :pensive:. I have a multi-step form and it stopped working. I am following the recommendations posted in the Wiki, but Chrome and Firefox complain that:

> $('#new_job')
[<form accept-charset=​"UTF-8" action=​"/​jobs" class=​"new_job" data-validate=​"true" id=​"new_job" method=​"post" novalidate=​"novalidate">​…​</form>​]

> $('#new_job').enableClientSideValidations()
TypeError: Object [object Object] has no method 'enableClientSideValidations'

I have the following in app/assets/javascripts/application.js:

//= require jquery
//= require jquery_ujs
//= require rails.validations.js

Any idea of why might be causing this issue? Thanks!

[bcardarella]

I'm sorry to see you're having an issue. I'm not quire sure what would be causing that problem. As you can see here: https://github.com/bcardarella/client_side_validations/blob/3-2-stable/coffeescript/rails.validations.coffee#L13-L27 there is only one place that the enableClientSideValidations function is called. Perhaps the $ is being redefined somewhere?

Even though it is more work for you the easiest (and quickest) way for me to diagnose this problem is if you can share some code with me that reproduces the issue.

[alonsogarciapablo]

@bcardarella thanks for your response. I am still investigating the issue. I will keep you posted.

[alonsogarciapablo]

Hey! Closing the issue as I finally solved the problem. It turns out that I still had the older version of rails.validations.js under vendor/assets/javascripts :astonished:. So I just removed the file and now enableClientSideValidations is finally defined.

Thanks for your help!