CODEWITHSUNDEEP
jquery-plugins
webslinger_007
webslinger_007

Reputation: 21

jquery Validate Plugin Hide Error Message

I have a basic table with radio buttons. I have an onclick even in the "td" that checks the radio when the "td" is clicked. The error message does not hide when the "td" is clicked. It only hides when the actual button is clicked. Here's my code. Any ideas? I have the jquery files stored locally.

<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).find('input:radio').attr('checked','checked');" /><INPUT  type="radio" id="22121GRID" name="SPGRID_1" value="5" class="required"  /></td>
        <td width="10%" onclick="$(this).find('input:radio').attr('checked','checked');" /><INPUT  type="radio" id="22121GRID" name="SPGRID_1" value="4" class="required"  /></td>
        <td width="10%" onclick="$(this).find('input:radio').attr('checked','checked');" /><INPUT  type="radio" id="22121GRID" name="SPGRID_1" value="3" class="required"  /></td>
        <td width="10%" onclick="$(this).find('input:radio').attr('checked','checked');" /><INPUT  type="radio" id="22121GRID" name="SPGRID_1" value="2" class="required"  /></td>
        <td width="10%" onclick="$(this).find('input:radio').attr('checked','checked');" /><INPUT  type="radio" id="22121GRID" name="SPGRID_1" value="1" class="required"  /></td>
</tr>
<tr><td><input type="submit" value="Submit" /></td></tr>
</table>
</form>


</body>
</html>

Upvotes: 2

Views: 564

Answers (1)

Ashwin Preetham Lobo
Ashwin Preetham Lobo

Reputation: 1856

Since you changing the checked through javascript, call .valid() method of validator.

You can use the following

<td width="10%" onclick="$(this).find('input:radio').attr('checked','checked').valid();" />            <INPUT  type="radio" id="22121GRID" name="SPGRID_1" value="5" class="required"  /> </td>

or 

$('td').click(function(){
$(this).find('radio').attr('checked','checked').valid();
});

Upvotes: 1

Related Questions