SimpleForm+ClientSideValidations+bootstrap - Validation is not occuring on the form- all inputs are accepted

Question

I am using the SimpleForm, ClientSideValidations, and ClientSideValidations-SimpleForm gems in a RoR application. I can render the form into the modal beautifully, however when the input loses focus no validation occurs and the form is submitted. Also note that I have tried using the fix found here: http://www.ddarrensmith.com/blog/2012/05/17/ruby-on-rails-client-side-validation-with-validation-helpers-and-twitter-bootstrap/

Segment of the view containing the form:

<div class='modal hide' id='New_Discrep' tabindex="-1" role='dialog' aria-labelledby="#New_Discrep_Label" aria-hidden='true'>
  <div class="modal-header">
    <button type='button' class='close' data-dismiss='modal' aria-    hidden='true'>x</button>
    <h3 id="New_Discrep_Label">Create Discrepancy</h3>
  </div>
  <%= simple_form_for @new_discrepancy, :validate => true, :url => {:controller=> 'discrepancy', :action => 'create', :device_id => @device.id} do |f| %>
  <div class='modal-body'>
    <%= f.input :system, :wrapper => :prepend, :label => false do %>
      <%= content_tag :span, 'System', :class => 'add-on input-label' %>
      <%= f.input_field :system %>
    <% end %>
    <%= f.input :description, :wrapper => :prepend, :label => false do %>
      <%= content_tag :span, 'Description', :class => 'add-on input-label' %>
      <%= f.input_field :description, :class => 'textarea' %>
    <% end %>
    <%= f.input :conditions, :wrapper => :prepend, :label => false do %>
      <%= content_tag :span, 'Condiditions', :class => 'add-on input-label' %>
      <%= f.input_field :conditions, :class => 'textarea' %>
    <% end %>
    <%= f.input :dirf, :wrapper => :prepend, :label => false do %>
      <%= content_tag :span, 'Reference', :class => 'add-on input-label' %>
      <%= f.input_field :dirf %>
    <% end %>
  </div>
  <div class='modal-footer'>
    <button type="button" class='btn', data-dismiss='modal', aria-hidden='true'>Cancel</button>
    <%= f.button :submit, :class => 'btn-primary' %>
  </div>
  <% end %>
</div>

My Gemfile

gem 'rails', '3.2.1'
gem 'jquery-rails'
gem 'carrierwave'
gem 'simple_form'
gem 'client_side_validations'
gem 'client_side_validations-simple_form'

Model

class Discrepancy < ActiveRecord::Base
STATUSES = ['Open', 'Closed', 'Rejected']

  belongs_to :device
  belongs_to :user
  has_many :parts
  has_many :updates

  validates :date_entered, :presence => true
  validates :status, :presence => true
  validates :description, :presence => true
  validates :system, :presence => true
  validate :close_date

  validates_inclusion_of :status, :in => STATUSES, 
    :message => "must be one of: #{STATUSES.join(', ')}"  

end

application.js file

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

I have also confirmed that the script tag is being produced in the html directly below the form. Thanks for the help!

Answer 1

All the logic gets applied to forms with visible inputs. Since your inputs are not visible on page load, no events are attached.

The following worked for me:

$('#myModal').on('shown', function () {
  $(ClientSideValidations.selectors.forms).validate();
});

Answer 2

The README actually details a more specific function to do this:

$(new_form).enableClientSideValidations();

https://github.com/bcardarella/client_side_validations#enabling

Answer 3

On newer bootstrap versions:

$('#myModal').on('shown.bs.modal', function () {
  $(ClientSideValidations.selectors.forms).validate();
});