Get client_side_validations working with Foundation
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

I'm trying to get the client_side_validations-simple_form gem working with simple_form and Zurb Foundation styling, but I'm getting an error and nothing else happens. Please help!

Here's the js console error I get when the validation should be firing:

Uncaught TypeError: Cannot read property 'add' of undefined

Seems to be a known bug:

With a likely workaround:

Probably an easy fix. Please provide clear instructions on how to get it working.

Here is my gemfile:

(rails 4.2.1)

gem 'simple_form'
gem 'client_side_validations', github: 'DavyJonesLocker/client_side_validations'
gem 'client_side_validations-simple_form', github: 'DavyJonesLocker/client_side_validations-simple_form'
gem 'foundation-rails'

Here is my application.js:

//= require jquery
//= require jquery_ujs
//= require rails.validations
//= require rails.validations.simple_form
//= require foundation
//= require turbolinks
//= require_tree .

To replicate this, create a Rails 4.2.1 app with the specified gems, and do:

rails g simple_form:install

...then follow the install instructions for client_side_validations and client-side_validations-simple-form

Then create a dummy form rails g scaffold user email name

rake db:migrate

In user.rb, add:

  validates :email, presence: true

In views/user/form, add validate: true to the form builder.

Now when you run it and try to create a new user, click on the email field, then click away, and notice that the JS validation does not trigger.

can you post a link to your repo and/or live site running?
skram 5 years ago
Unfortunately I can't for this project. But I've included easy instructions above to replicate the problem. Thanks.
bevan 5 years ago
Lol for meta use of!
kc00l 5 years ago
Haha, not the first time I've used it for that :)
bevan 5 years ago
Yeah, I saw your list of bounties. Looking forward for the next Rails bounty ;)
kc00l 5 years ago
awarded to kc00l

Crowdsource coding tasks.

1 Solution

Winning solution

Just paste the following coffeescript function in the scaffold generated file (taken from

Github Repo of solution

Live proof:

ClientSideValidations.formBuilders['SimpleForm::FormBuilder'].wrappers.vertical_form =
  add: (element, settings, message) ->
    errorElement = element.parent().find "#{settings.error_tag}.#{settings.error_class}"
    if not errorElement[0]?
      wrapper_tag_element = element.closest(settings.wrapper_tag)
      errorElement = $("<#{settings.error_tag}/>", { class: settings.error_class, text: message })
    wrapper_class_element = element.closest(".#{settings.wrapper_class}");
  remove: (element, settings) ->
    wrapper_class_element = element.closest(".#{settings.wrapper_class}.#{settings.wrapper_error_class}")
    wrapper_tag_element = element.closest(settings.wrapper_tag)
    errorElement = wrapper_tag_element.find("#{settings.error_tag}.#{settings.error_class}")