title: symfony 2, collection of forms, validation error
body: <p>My form type has a collection field:</p>
  
  <pre><code>$builder-&gt;add('affiliates', 'collection', array(
      'type' =&gt; new AffiliateFormType(),
      'allow_add' =&gt; true, 
      'allow_delete' =&gt; true, 
      'by_reference' =&gt; false,
  ));
  </code></pre>
  
  <p>In the template I have:</p>
  
  <pre><code>&lt;table id="affiliates" &gt;
      &lt;tr&gt;
          &lt;th class="t1c0"&gt;&lt;/th&gt;
          &lt;th class="t1c1" data-prototype="{{ form_widget(form.affiliates.vars.prototype.affiliate_name)|e }}"&gt;Name&lt;/th&gt;
          &lt;th class="t1c2" data-prototype="{{ form_widget(form.affiliates.vars.prototype.affiliate_type_code)|e }}"&gt;Type&lt;/th&gt;
          &lt;th class="t1c3" data-prototype="{{ form_widget(form.affiliates.vars.prototype.address)|e }}"&gt;Address&lt;/th&gt;
      &lt;/tr&gt;
      {% for affiliate in form.affiliates %}
      &lt;tr&gt;
          &lt;td class="t1c0"&gt;&lt;input type="button" class="delete_button" value="Delete"/&gt;&lt;/td&gt;
          &lt;td class="t1c1"&gt;{{ form_widget(affiliate.affiliate_name) }}{{ form_errors(affiliate.affiliate_name) }}&lt;/td&gt;
          &lt;td class="t1c2"&gt;{{ form_widget(affiliate.affiliate_type_code) }}{{ form_errors(affiliate.affiliate_type_code) }}&lt;/td&gt;
          &lt;td class="t1c3"&gt;{{ form_widget(affiliate.address) }}{{ form_errors(affiliate.address) }}&lt;/td&gt;
      &lt;/tr&gt;
      {% endfor %}
  &lt;/table&gt;
  &lt;input type="button" class="add_button" value="Add line" onclick="addAffiliate();"/&gt;
  </code></pre>
  
  <p>Now javasript code (with jquery) for adding/deleting rows is:</p>
  
  <pre><code>&lt;script language="javascript"&gt;
  
      var affiliatesCollection = $('table#affiliates');
  
      $(document).ready(function(){
          var rowCount = $('table#affiliates tr').length;
          affiliatesCollection.data('index', rowCount - 1);
  
          $('.delete_button').click(function(e) {
              $(this).closest("tr").remove();
          });
      });
  
      function addAffiliate() {
          //get index
          var index = affiliatesCollection.data('index');
          affiliatesCollection.data('index', index + 1);
  
          //add row
          var cells = new Array();
          var cell = $('&lt;input type="button" class="delete_button" value="Delete"/&gt;').click(function (){
              $(this).closest("tr").remove();
          });
          var $cell = $('&lt;td&gt;&lt;/td&gt;').append(cell);
          cells[0] = $cell;
  
          for (var i = 1; i &lt; 4; i++)
          { 
              var prototype = $('th.t1c'.concat(i)).data('prototype');
              var cell = prototype.replace(/__name__/g, index);
              var $cell = $('&lt;td&gt;&lt;/td&gt;').append(cell);
              cells[i] = $cell;
          }
          var $newRow = $('&lt;tr&gt;&lt;/tr&gt;').append(cells);
          affiliatesCollection.append($newRow);
      }
  
  &lt;/script&gt;
  </code></pre>
  
  <p>Let say name is required field. The above code works fine except one case: When a row is added and deleted and added again, deleted index is not available anymore like first row's index=1, second row's index=3; and when the invalid form is submitted (for example name field is empty) form.isValid() correctly returns false, but validation errors are not shown beneath their respective elements. Can someone help me correct the issue? Thank you.</p>