jquery validate errorPlacement wrapInner errorElement

Question

У меня проблема с errorPlacement. У меня есть таблица, и я хочу отображать ошибки после tr, у которых есть вход с недопустимым значением. Для правильной индикации ошибки необходимо включить tr и td. Я пытаюсь обернуть элемент ошибки (tr) на td, и он работает, но только один раз. Я ввожу недопустимое значение, а затем получаю ошибку в tr и td (правильно), затем вводим действительное значение и снова недействительно, а затем элемент ошибки вставляется только в tr. Td не появляется.
Вот мой JQuery код:

if ($('.predict_score').length > 0) { 
     var $predict_score_form = $('#predict_score_form'); 
     $predict_score_form.validate({ 
      errorPlacement: function(error, element) { 
       error.insertAfter(element.parent().parent()); 
       error.wrapInner('<td colspan=100%>'); 
      }, 
      errorElement: 'tr' 
     }); 

     $('.team_score_field').each(function() { 
      $(this).rules('add', { 
       digits: true 
      }); 
     }); 
    } 

и HTML:

<div class="predict_score"> 
    <form id ="predict_score_form" action="" method='post'> 
<table> 
    <thead> 
     <tr> 
      <th>&nbsp;</th><th>&nbsp;</th><th>&nbsp;</th><th>&nbsp;</th><th>&nbsp;</th><th>&nbsp;</th> 
      </tr> 
    </thead> 
    <tbody>  
     <tr> 
      <td > <span>11.09.2013 13:30</span></td> 
      <td > 
       Reading FC          </td> 
      <td> 

       <input type="text" value="" name=""> 
       <strong>:</strong> 
       <input type="text" value="" name=""> 

      </td>  
      <td> 
       Stoke City          </td> 
      <td>-:-</td> 
      <td class="right"></td> 
     </tr>   
     <tr> 
      <td > <span>11.09.2013 00:00</span></td> 
      <td > 
       Toronto FC          </td> 
      <td >  
       <input class="team_score_field" type="text" value="" disabled="disabled" name=""> 
       <strong>:</strong> 
       <input class="team_score_field" type="text" value="" disabled="disabled" name="">  
      </td>  
      <td> 
       Chicago Fire          </td> 
      <td>-:-</td> 
      <td class="right"></td> 
     </tr>  
     <tr><td colspan="100%"><input type="submit" value="" class="green_btn"></td></tr> 
    </tbody> 
</table> 
    </form> 
</div> 

Любые предложения, как это исправить?

Answer 1

Попробуйте

var $predict_score_form = $('#predict_score_form'); 
$predict_score_form.validate({ 
    errorPlacement: function(error, element) { 
     error.find('td').attr('colspan', '100%') 
     var $etr = error.closest('tr'); 
     $etr.insertAfter(element.closest('tr')); 
    }, 
    errorElement: 'td', 
    wrapper: 'tr', 
    submitHandler: function(){ 
     return false; 
    } 
}); 

Demo: Fiddle