Validation for form brought in dynamically not working

matteomelani commented 13 years ago

I have a form that is brought into the page using an ajax form. Once I get the form I call validate() on it but when I tab out of the fields I get:

settings is undefined http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js Line 628

Here is the js:

$('#child_memberships a.add').click(function(){
    show_modal_window_full_screen("add_child_form", $(this).attr("data-form"));

    $('form.new_user').validate();

});

Thanks for any help!

bcardarella commented 13 years ago

Can you gist the html result of the AJAX request?

matteomelani commented 13 years ago

 <form accept-charset="UTF-8" action="/users" class="new_user" data-remote="true" data-validate="true" id="new_user" method="post" novalidate="novalidate"><div style="margin:0;padding:0;display:inline"><input name="utf8" value="✓" type="hidden"><input name="authenticity_token" value="0yVSrjZRcI8KrDbijNjmKnxAiqB/K1+DfkZNMfM8MFk=" type="hidden"></div>
                              <div id="avatar_id"></div>
                              <input id="user_profile_attributes_main_role" name="user[profile_attributes][main_role]" value="child" type="hidden">
                              <div class="field_container">
                                <label for="user_profile_attributes_sex">Child is a</label>
                                <select id="user_profile_attributes_sex" name="user[profile_attributes][sex]"><option value="">select sex </option>
                                <option value="male">boy</option>
                                <option value="female">girl</option></select>
                              </div>
                              <div class="clear"></div>
                              <div class="field_container">
                                <label for="user_profile_attributes_first_name">First name</label>
                                <input data-validate="true" id="user_profile_attributes_first_name" name="user[profile_attributes][first_name]" size="30" type="text">
                              </div>
                              <div class="clear"></div>
                              <div class="field_container">
                                <label for="user_profile_attributes_last_name">Last name</label>
                                <input data-validate="true" id="user_profile_attributes_last_name" name="user[profile_attributes][last_name]" size="30" type="text">
                              </div>
                              <div class="clear"></div>
                              <div class="field_container">
                                <label for="user_profile_attributes_birthday">Born on</label>
                                <select id="user_profile_attributes_birthday_3i" name="user[profile_attributes][birthday(3i)]">
                                <option value="">Day</option>
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                                <option value="4">4</option>
                                <option value="5">5</option>
                                <option value="6">6</option>
                                <option value="7">7</option>
                                <option value="8">8</option>
                                <option value="9">9</option>
                                <option value="10">10</option>
                                <option value="11">11</option>
                                <option value="12">12</option>
                                <option value="13">13</option>
                                <option value="14">14</option>
                                <option value="15">15</option>
                                <option value="16">16</option>
                                <option value="17">17</option>
                                <option value="18">18</option>
                                <option value="19">19</option>
                                <option value="20">20</option>
                                <option value="21">21</option>
                                <option value="22">22</option>
                                <option value="23">23</option>
                                <option value="24">24</option>
                                <option value="25">25</option>
                                <option value="26">26</option>
                                <option value="27">27</option>
                                <option value="28">28</option>
                                <option value="29">29</option>
                                <option value="30">30</option>
                                <option value="31">31</option>
                                </select>
                                <select id="user_profile_attributes_birthday_2i" name="user[profile_attributes][birthday(2i)]">
                                <option value="">Month</option>
                                <option value="1">January</option>
                                <option value="2">February</option>
                                <option value="3">March</option>
                                <option value="4">April</option>
                                <option value="5">May</option>
                                <option value="6">June</option>
                                <option value="7">July</option>
                                <option value="8">August</option>
                                <option value="9">September</option>
                                <option value="10">October</option>
                                <option value="11">November</option>
                                <option value="12">December</option>
                                </select>
                                <select id="user_profile_attributes_birthday_1i" name="user[profile_attributes][birthday(1i)]">
                                <option value="">Year</option>
                                <option value="2010">2010</option>
                                <option value="2009">2009</option>
                                <option value="2008">2008</option>
                                <option value="2007">2007</option>
                                <option value="2006">2006</option>
                                <option value="2005">2005</option>
                                <option value="2004">2004</option>
                                <option value="2003">2003</option>
                                <option value="2002">2002</option>
                                <option value="2001">2001</option>
                                <option value="2000">2000</option>
                                <option value="1999">1999</option>
                                <option value="1998">1998</option>
                                <option value="1997">1997</option>
                                </select>
                              </div>
                              <div class="clear"></div>
                              <div class="field_container">
                                <label for="user_profile_attributes_about">About</label>
                                <textarea cols="40" id="user_profile_attributes_about" name="user[profile_attributes][about]" rows="20"></textarea>
                              </div>
                              <div class="clear"></div>
                              <div class="field_container">
                                <label for="Classrooms">Classrooms</label>
                              </div>
                              <div class="clear"></div>
                              <div class="membeships">
                                <input id="user_memberships_attributes_0_circle_id" name="user[memberships_attributes][0][circle_id]" value="157" type="hidden">
                                <input id="user_memberships_attributes_0_roles_" name="user[memberships_attributes[0][roles][]" value="family_kid" type="hidden">
                                <input id="user_memberships_attributes_0_roles_" name="user[memberships_attributes[0][roles][]" value="family_my_family" type="hidden">
                              </div>
                              <div class="child_classrooms">

                                <div class="new_classroom_fields"></div>
                                <div class="clear"></div>
                              </div>
                              <div class="add_classroom">
                                <a href="#" class="add_fields" data-association-insertion-node=".new_classroom_fields" data-association="classroom_membership" data-associations="classroom_memberships" data-template="&lt;div class='nested-fields'&gt;
                                  &lt;div class='classroom_membership_fields'&gt;
                                    &lt;input id=&quot;user_classroom_memberships_attributes_new_classroom_memberships_user_id&quot; name=&quot;user[classroom_memberships_attributes][new_classroom_memberships][user_id]&quot; type=&quot;hidden&quot; /&gt;
                                    &lt;div class='field_container'&gt;
                                      &lt;select data-validate=&quot;true&quot; id=&quot;user_classroom_memberships_attributes_new_classroom_memberships_circle_id&quot; name=&quot;user[classroom_memberships_attributes][new_classroom_memberships][circle_id]&quot;&gt;&lt;option value=&quot;&quot;&gt; select classroom &lt;/option&gt;
                                      &lt;option value=&quot;132&quot;&gt;Toddler/Menlo Children's Center/Menlo Park/94025&lt;/option&gt;
                                      &lt;option value=&quot;133&quot;&gt;Early Preschool/Menlo Children's Center/Menlo Park/94025&lt;/option&gt;
                                      &lt;option value=&quot;134&quot;&gt;Preschool/Menlo Children's Center/Menlo Park/94025&lt;/option&gt;
                                      &lt;option value=&quot;135&quot;&gt;Morning Birds/Menlo Children's Center/Menlo Park/94025&lt;/option&gt;&lt;/select&gt;
                                      &lt;input id=&quot;user_classroom_memberships_attributes_new_classroom_memberships__destroy&quot; name=&quot;user[classroom_memberships_attributes][new_classroom_memberships][_destroy]&quot; type=&quot;hidden&quot; /&gt;&lt;a href=&quot;#&quot; class=&quot;remove_fields dynamic&quot;&gt;X&lt;/a&gt;
                                    &lt;/div&gt;
                                    &lt;div class='clear'&gt;&lt;/div&gt;
                                  &lt;/div&gt;
                                &lt;/div&gt;
                                ">+add classroom</a>
                              </div>
                              <div class="button_container">
                                <input class="submit_button" id="user_submit" name="commit" value="save" type="submit">
                              </div>
                        </form>
                        <div class="clear"></div>

bcardarella commented 13 years ago

Please gist this On Jul 23, 2011 4:37 PM, "matteomelani" < reply@reply.github.com> wrote:

<form accept-charset="UTF-8" action="/users" class="new_user" data-remote="true" data-validate="true" id="new_user" method="post" novalidate="novalidate"><div style="margin:0;padding:0;display:inline"><input name="utf8" value="✓" type="hidden"><input name="authenticity_token" value="0yVSrjZRcI8KrDbijNjmKnxAiqB/K1+DfkZNMfM8MFk=" type="hidden">

Child is a

First name

Last name

Born on

About

Classrooms

+add classroom

Reply to this email directly or view it on GitHub:

https://github.com/bcardarella/client_side_validations/issues/144#issuecomment-1638663

matteomelani commented 13 years ago

Sorry what does it mean: "gist this"?

-Matteo

bcardarella commented 13 years ago

Im sorry, http://gist.github.com On Jul 23, 2011 7:57 PM, "matteomelani" < reply@reply.github.com> wrote:

Sorry what does it mean: "gist this"?

-Matteo

Reply to this email directly or view it on GitHub:

https://github.com/bcardarella/client_side_validations/issues/144#issuecomment-1639237

matteomelani commented 13 years ago

Ok. here is the link: https://gist.github.com/1102029

Let me know if it works for you....I have never gisted before :-)

Thanks for looking into this. -Matteo

csommerauer commented 13 years ago

I'm having the same issue, I tried it with jquery 1.4.4, 1.6.1 and 1.6.2 with the same result. client_side_validations 3.1.0

after using the tab I get in the firebug console:
settings is undefined

and it stops on line 28 of rails.validatiions.js .live('focusout', function() { $(this).isValid(settings.validators); })

astjohn commented 13 years ago

I have a similar issue with fields added dynamically underneath a fields_for.

cailinanne commented 13 years ago

Have you tried manually re-calling the .validate() method on the form? This works for forms that are dynamically added to the DOM - maybe it would work for fields too?

// Main hook
// If new forms are dynamically introduced into the DOM the .validate() method
// must be invoked on that form
$(function() { $('form[data-validate]').validate(); })

bcardarella commented 13 years ago

I'm sorry I took so long getting back on this issue.

I'd like to support this, is anybody else still having problems after @cailinanne's suggestion?

KODerFunk commented 13 years ago

Yes, i have. May be i make improve js-part for nested fields in next days.

bcardarella commented 13 years ago

So this is actually working for me. I'm using Rails 3.1 and the 3.1 version of ClientSideValidations. Here is the code:

<!-- new_user.html.erb -->
<div id="form_container"></div>
<%= link_to "Render form", new_user_path, :remote => true -%>

# controller

def new
  @user = User.new
  respond_to do |format|
    format.html
    format.js
  end
end

// new_user.js.erb
// There is a container element called '#form_container' that I append the rendered for to
$('#form_container').append('<%= j render :partial => 'form' -%>');

// I now activate the form for client side validations
$('#new_user').validate();

<!-- _form.html.erb -->
<%= form_for(@user, :validate => true) do |f| %>
  <div class="field">
    <%= f.label :name %><br />
    <%= f.text_field :name %>
  </div>
  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>

bcardarella commented 13 years ago

If anybody still has issues with this please let me know and I'll try to step you through it but in the mean time I'm going to close this.

KODerFunk commented 13 years ago

You right. Close this. My problem: dynamic nested fields with indexes and without indexes (autoindexed, e.g. place[fun_attributes][]). I found the solution in closed issues + information that you do not include similar improvements to 4.0. Is this true?

bcardarella commented 13 years ago

Are you asking if DynamicForm will be supported in 4.0?

KODerFunk commented 13 years ago

No) I'm using own js-mechanism for dynamic create, delete and swap nested parts. Indexes are distributed at client side, but in generated js (window['form_id'] = {...) validations only for rendered fields (with zero index). Now here two solutions: fix gem or dynamically copy for validation of new indexes. Now use the latter as not to affect the code of gem. Maybe this should be somehow cleverly cling to validate the specific form-elements? For example a data-attributes. It would have solved lots of problems and has given potential.

anuragphadke19 commented 13 years ago

I still cannot get it to work. it gives me Error TypeError: $("#new_shipping_detail").validate is not a function

$(function() { $('#new_shipping_detail').validate(); })

where new_shipping_detail is loaded dynamically. It looks like the validate method is not attached to the form.

bcardarella commented 13 years ago

Strange, I definitely got this to work in a small app that I built... would it be possible for you to write a small example app demonstrating what is happening? I'm sorry that this ends up being quite a bit of work for you but I think it would be the fastest way for me to debug it rather than going back and forth on here.

stuartc commented 12 years ago

I'm having a similar issue, I have to call $('form[data-validate]').validate(); manually in my application like this (excerpt from compiled .coffee):

 (function() {
    $(function() {
      $('form[data-validate]').validate();
    });
 }).call(this);

It's almost as if the DOM hasn't loaded when the main hook is called, but it definitely should have? Shouldn't it? I have other calls to elements on the page in other JS files and they work fine. The form is static, and comes in plain HTML, it has all the attrs to hook on and such, but it wont do any validations until i call validate() manually.

DavyJonesLocker / client_side_validations

Validation for form brought in dynamically not working #144