Client side validations gem not working if I fetch form via ajax request

Question

If I fetch a simple_form using ajax request, client side validations gem doesn't work..

<%= link_to 'Add +', new_group_path, :remote => true, :id => "new_group_link" %>

Now the form new group will show up and its not triggering client side validations.

I got the issue that client side functions are not binding with the form. (The functions specified in javascript assets.)

But how I to trigger those functions.??

EDIT

Think about standard scaffold form. So as per the link_to tag specified above. new_group_path will go the new action and using respond_to block, new.js.erb file will be rendered. Right. Here is the code in new.js.erb

  $('#new_group_link').hide().after('<%= j render("form") %>');

Answer 1

When you get a form with ajax you should enable client side validation by yourself. Here is the link:

$(new_form).enableClientSideValidations();

Answer 2

If you want the client side validations to trigger for all forms loaded via ajax, use this somewhere in your main.js:

$(document).ajaxSuccess(function(){
    if($('form[data-validate]').length){
        $('form[data-validate]').enableClientSideValidations();
    }
});

Of course, you should have :validate => true in the form for this to work.

Answer 3

From the docs found this:

---

In your Gemfile add the following:

gem 'simple_form'
gem 'client_side_validations'
gem 'client_side_validations-simple_form'

Order matters here. SimpleForm and ClientSideValidations

need to be required before ClientSideValidations-SimpleForm.

---

In your FormBuilder you only need to enable validations:

<%= form_for @user, :validate => true do |f| %>

That should be enough to get you going.

By default the validators will be serialized and embedded in a <script> tag following the tag. If you would like to render that <script> tag elsewhere you can do this by passing a name to :validate

<%= form_for @user, :validate => :user_validators do |f| %>

---

If you have rendered a new form via AJAX into your page you will need to enable that form for validation:

$(new_form).enableClientSideValidations();

You should attach this to an event that is fired when the new HTML renders.

You can use the same function if you introduce new inputs to an existing form:

$(new_input).enableClientSideValidations();