Hi all,

I am learning JQuery and writing a simple data validation for the two fields in a HTML form:

<FORM name="addpost" id="addpost" method="post" action="/add">
<TABLE BORDER=0 width="100%">
<TR>
    <TD>Topic</TD>
    <TD>       
        <DIV ID="topic">
    <INPUT type=text name="topic" id="topic" size="72" maxlength="108"/>
    </DIV>       
        </TD>
</TR>
<TR>
    <TD>Comments</TD>
    <TD>
        <DIV ID="topiccontent"> 
        <TEXTAREA rows="12" cols="48" name="content" ID="content">
    </TEXTAREA>
        </DIV>
    </TD>
</TR>
<TR>
    <TD>
    <INPUT type="submit" value="Send">
    </TD>
</TR>
</TABLE>
</FORM>

Here is the JQuery script for checking the data input from the form above:

$('#addpost').submit(function(){       
    if($('#topic').val()==""){
        $('#topic').addClass('hierror'); 
        return false;}
    else{$('#topic').removeClass('hierror');}

    if($('#topiccontent').val()==""){
     $('#topiccontent').addClass('hierror'); 
     return false;}
    else{$('#topiccontent').removeClass('hierror');}
});

Here is the CSS for the hierror class:
.hierror{border-style:solid; border-width:12px; border-color:#FF0000;}

('#topic').removeClass('hierror') works but
('#topiccontent').removeClass('hierror') doesn't.

Could you help me please?