I have the following form:
=form_for user, :validate=>true do |user_form|
#avatar_id
=user_form.fields_for :profile do |p|
=p.hidden_field :main_role, :value=>Profile::CHILD
.field_container
=p.label :sex, "Child is a"
=p.select :sex, [["boy", "male"], ["girl", "female"]] ,{:prompt=> "select sex "}
.clear
.field_container
=p.label :first_name, "First name"
=p.text_field :first_name
.clear
.field_container
=p.label :last_name, "Last name"
=p.text_field :last_name
.clear
...
The form posts to the users_controller. Authentication is implemented with Devise.
The problem is that nothing gets validated. No AJAX call gets triggered
I have tried to add :validate=>true to :first_name and :last_name but it did not make any difference.
Here is the html that gets generated:
<form novalidate="novalidate" method="post" id="new_user" data-validate="true" class="new_user" action="/users" accept-charset="UTF-8"><div style="margin:0;padding:0;display:inline"><input type="hidden" value="✓" name="utf8"><input type="hidden" value="kBAdlDytQxR95eQqDzJPGxz0UycmOLFKwIKFJFIRG0E=" name="authenticity_token"></div>
<div id="avatar_id"></div>
<input type="hidden" value="child" name="user[profile_attributes][main_role]" id="user_profile_attributes_main_role">
<div class="field_container">
<label for="user_profile_attributes_sex">Child is a</label>
<select name="user[profile_attributes][sex]" id="user_profile_attributes_sex" data-validate="true"><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 type="text" size="30" name="user[profile_attributes][first_name]" id="user_profile_attributes_first_name" data-validate="true">
</div>
<div class="clear"></div>
<div class="field_container">
<label for="user_profile_attributes_last_name">Last name</label>
<input type="text" size="30" name="user[profile_attributes][last_name]" id="user_profile_attributes_last_name" data-validate="true">
</div>
<div class="clear"></div>
<div class="field_container">
<label for="user_profile_attributes_birthday">Born on</label>
<select name="user[profile_attributes][birthday(3i)]" id="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 name="user[profile_attributes][birthday(2i)]" id="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 name="user[profile_attributes][birthday(1i)]" id="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 rows="20" name="user[profile_attributes][about]" id="user_profile_attributes_about" cols="40"></textarea>
</div>
<div class="clear"></div>
<div class="field_container">
<label for="Classrooms">Classrooms</label>
</div>
<div class="clear"></div>
<div class="membeships">
<input type="hidden" value="184" name="user[memberships_attributes][0][circle_id]" id="user_memberships_attributes_0_circle_id">
<input type="hidden" value="family_kid" name="user[memberships_attributes[0][roles][]" id="user_memberships_attributes_0_roles_">
<input type="hidden" value="family_my_family" name="user[memberships_attributes[0][roles][]" id="user_memberships_attributes_0_roles_">
</div>
<div class="child_classrooms">
<div class="new_classroom_fields"></div>
<div class="clear"></div>
</div>
<div class="add_classroom">
<a data-template="<div class='nested-fields'>
<div class='classroom_membership_fields'>
<input id="user_classroom_memberships_attributes_new_classroom_memberships_user_id" name="user[classroom_memberships_attributes][new_classroom_memberships][user_id]" type="hidden" />
<div class='field_container'>
<select data-validate="true" id="user_classroom_memberships_attributes_new_classroom_memberships_circle_id" name="user[classroom_memberships_attributes][new_classroom_memberships][circle_id]"><option value=""> select classroom </option>
<option value="132">Toddler/Menlo Children's Center/Menlo Park/94025</option>
<option value="133">Early Preschool/Menlo Children's Center/Menlo Park/94025</option>
<option value="134">Preschool/Menlo Children's Center/Menlo Park/94025</option>
<option value="135">Morning Birds/Menlo Children's Center/Menlo Park/94025</option>
<option value="158">sbbbs///</option>
<option value="161">asd///</option>
<option value="162">677888///</option>
<option value="163">asdassad///</option>
<option value="164">asda///</option>
<option value="165">asabbbnn///</option>
<option value="166">asdas///</option>
<option value="167">asa23///</option>
<option value="171">qwq///</option>
<option value="172">asd///</option>
<option value="173">asdas///</option></select>
<input id="user_classroom_memberships_attributes_new_classroom_memberships__destroy" name="user[classroom_memberships_attributes][new_classroom_memberships][_destroy]" type="hidden" /><a href="#" class="remove_fields dynamic">X</a>
</div>
<div class='clear'></div>
</div>
</div>
" data-associations="classroom_memberships" data-association="classroom_membership" data-association-insertion-node=".new_classroom_fields" class="add_fields" href="#">+add classroom</a>
</div>
<div class="button_container"></div>
<input type="submit" value="save" name="commit" id="user_submit" class="submit_button">
</form>
Thanks for any help.
Problem solved: since the form is brought in dynamically I needed to call .validate() on the form.
The right function to call is documented in the source code.
-Matteo