Tuesday, 10 September 2013

jquery validate errorPlacement wrapInner errorElement

jquery validate errorPlacement wrapInner errorElement

I have a problem with errorPlacement. I have a table and I want to display
errors below tr which has input with invalid value. Error shoud be inside
tr and td, to properly display. I'm trying to wrap the error element(tr)
by td and it works but only once. I enter invalid value, then get error in
tr and td (correct), then I enter valid value and again invalid and then
error element is inserted only to tr. Td does not appear.
Here's my jquery code:
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
});
});
}
and 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>
Any suggestions how to fix this?

No comments:

Post a Comment