Validation plugin - how to use custom classes?

Validation plugin - how to use custom classes?

Hi,

I've been going round and round in circles with this for the last 2 hours, and its driving me up the wall.

I'm using this plugin: http://docs.jquery.com/Plugins/Validation .  I've attached a screenshot of what happens upon a "successful" value being entered.

With the following CSS classes:

  1.     .valid {
  2.         padding-top: 4px;
  3.         background: #ffffff url('/bootstrap/assets/img/valid.png') right center no-repeat;
  4.        
  5.     }
  6.     .error {
  7.         font-weight: bold;
  8.         color: red;
  9.         padding: 2px 8px;
  10.         margin-top: 2px;
  11.     }
  12.     input[type="password"], input[type="text"] {
  13.         padding-right:20px;
  14.     }

Then the following JS code:

  1.         $("#registerForm").validate({
  2.             rules: {
  3.               FirstName: {
  4.                 required: true
  5.               },
  6.               LastName: {
  7.                 required: true
  8.               },
  9.               Email: {
  10.                 required: true,
  11.                 email: true
  12.               },
  13.               Password: {
  14.                 required: true,
  15.                 minlength: 4
  16.               }
  17.             },
  18.             messages: {
  19.                 FirstName: "Enter your firstname",
  20.                 LastName: "Enter your lastname",
  21.                 Password: {
  22.                     required: "Provide a password",
  23.                     rangelength: jQuery.format("Enter at least {0} characters")
  24.                 },
  25.                 Email: {
  26.                     required: "Please enter a valid email address",
  27.                     minlength: "Please enter a valid email address"
  28.                 },   
  29.             },
  30.             success: function(label) {
  31.                 var theparent = $(label).parent();
  32.                 $(theparent).addClass("valid").removeClass("error");
  33.             },
  34.             submitHandler: function(form) {
  35.                 $("#ccInfoError").hide();
  36.                 $.post("/cgi-bin/art/joinnew.cgi", $("#registerForm").serialize() , function(data) {
  37.                     if (data == "BAD_INFO" || data == "INVALID_CVV") {
  38.                         $("#ccInfoError").show().html("Please check your payment information is all filled out");
  39.                     } else if (data == "INVALID_CARD_NUMBER") {
  40.                         $("#ccInfoError").show().html("Please Credit Card number appears to be an invalid format. Please check");
  41.                     } else if (data == "DONE") {
  42.                         document.location.href= "/cgi-bin/page.cgi?p=register_success";
  43.                     } else {
  44.                         $("#ccInfoError").show().html(data);
  45.                     }
  46.                 });
  47.                 return false;
  48.             }
  49.         });

It kinda works, as it adds the "valid" class fine to the input BUT it also adds it as a label as well! I don't want it to use a label... I wanna add it to the CSS class itself (so I can remove it in other parts of my code if needed with removeClass() )

Can anyone suggest where I'm going wrong? I've tried so many things I've actually lost track!

TIA

Andy