ruby on rails - Rails3 + Devise + client_side_validation not working with Devise -

i have following form:

 =form_for user, :validate=>true |user_form|   #avatar_id   =user_form.fields_for :profile |p|     =p.hidden_field :main_role, :value=>profile::child     .field_container       =p.label :sex, "child 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 users_controller. authentication implemented devise. problem nothing gets validated. no ajax call gets triggered

i have tried add :validate=>true :first_name , :last_name did not make difference.

here html 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 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="&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;option value=&quot;158&quot;&gt;sbbbs///&lt;/option&gt;             &lt;option value=&quot;161&quot;&gt;asd///&lt;/option&gt;             &lt;option value=&quot;162&quot;&gt;677888///&lt;/option&gt;             &lt;option value=&quot;163&quot;&gt;asdassad///&lt;/option&gt;             &lt;option value=&quot;164&quot;&gt;asda///&lt;/option&gt;             &lt;option value=&quot;165&quot;&gt;asabbbnn///&lt;/option&gt;             &lt;option value=&quot;166&quot;&gt;asdas///&lt;/option&gt;             &lt;option value=&quot;167&quot;&gt;asa23///&lt;/option&gt;             &lt;option value=&quot;171&quot;&gt;qwq///&lt;/option&gt;             &lt;option value=&quot;172&quot;&gt;asd///&lt;/option&gt;             &lt;option value=&quot;173&quot;&gt;asdas///&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;       " 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 help.

problem solved: since form brought in dynamically needed call .validate() on form.

the right function call documented in source code.

-matteo