Rails3 + Devise + client_side_validation not working with Devise

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 开发者_如何学Cvalue="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 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