jQuery Validation Plugin : hightlight and errorClass

jQuery Validation Plugin : hightlight and errorClass

Hi guys,
 
I am trying to set the border of asp.net Textboxes to red if the validation fails. At the same time I also want a (*) next to invalid textbox.
Below is the code which I have so far and the image shows the output. As you can see in the image the (*) is also getting border set which I don't want. Tried couple of variations but did not work.
I will really appreciate if someone can shed some light on what's wrong in the code.
 
HTML:

Price1:

< asp : TextBox ID ="txtPrice1" runat ="server" CssClass ="numeric" Width ="230px"></ asp : TextBox >< br />
Price2: < asp : TextBox ID ="txtPrice2" runat ="server" CssClass ="numeric" Width ="230px"></ asp : TextBox > < br />

Total: <asp:TextBox ID="txtTotal" runat="server" class="total"></asp:TextBox><br />

<asp:Button ID="Button1" runat="server" Text="Button" />

JS and CSS:

<

script type="text/javascript">

$(document).ready(

function() {

$.validator.addMethod(

"cNumber", $.validator.methods.number, "*");

$.validator.addClassRules(

"numeric", { cNumber: true });

$(

".numeric").validate({

highlight:

function(element, errorClass) {

$(element).addClass(errorClass);

$(element.form).find(

"label[for=" + element.id + "]").remove(errorClass);

},

unhighlight:

function(element, errorClass) {

$(element).removeClass(errorClass);

}

});

});

</

script>

<

style type="text/css">

.error

{

border-color:Red;

border-style:solid;

border-width:1px;

}

</style>

highlight