I'm a beginner with jquery. I'm using the latest jquery validate plugin. I have a simple grid with radio buttons. Everything is working correctly with the error message and the removal of the error message when a button is selected. I use an onclick in the <td> tag to select the radio button if the <td> is clicked. In this case, the error message is not removed. Only if I click the button itself. Here is a very basic example. Please help.
<html>
<head>
<script src="jquery-latest.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
<script>
$(document).ready(function(){
$("#myform").validate({
errorPlacement: function(error, element) {
error.appendTo(element.parent("td").prev("td") );
},
debug:true
})
});
</script>
</head>
<body>
<form id="myform" action="/login" method="post">
<table border="1">
<tr>
<td width="30%">Attribute 1<br /></td>
<td width="10%" onclick="this.firstChild.checked = true;"><INPUT type="radio" id="22121GRID" name="SPGRID_1" value="5" class="required" /></td>
<td width="10%" onclick="this.firstChild.checked = true;"><INPUT type="radio" id="22121GRID" name="SPGRID_1" value="4" class="required" /></td>
<td width="10%" onclick="this.firstChild.checked = true;"><INPUT type="radio" id="22121GRID" name="SPGRID_1" value="3" class="required" /></td>
<td width="10%" onclick="this.firstChild.checked = true;"><INPUT type="radio" id="22121GRID" name="SPGRID_1" value="2" class="required" /></td>
<td width="10%" onclick="this.firstChild.checked = true;"><INPUT type="radio" id="22121GRID" name="SPGRID_1" value="1" class="required" /></td>
</tr>
<td></td><td><input type="submit" value="Submit"/></td><td></td>
</table>
</form>
</body>
</html>