Jquery Validate success function not clearning valid labels on re-validate?

I have a form that uses JQuery Validate plugin to validate the data. For the username field (but not other fields on my form), I would like to display "Username available" next to the field if the username is available.

I have this almost working. The only thing that is problematic is when the user edits the username after they enter a valid value, the previous 开发者_高级运维valid message is never removed, so next to the field it reads "Username available Username available", or "Username available Username available Username available" etc.

What changes would I need to make it remove the previous "Username available" message(s) when it re-validates this field?

My jquery success function is as follows:

$("form").validate({
        success: 
            function(label) {

                if (label.attr('for') == "username") {
                    var element = '#' + label.attr('for');
                    label.removeClass("error").addClass("valid").text("Username available");
                } else {
                    label.removeClass("error");
                }


        }
    });

    $("#regForm").validate();
});         

I found the solution.

Basically, if your CSS is not updated after adding your class valid that is the class rules are not overridden. Why? The problem is not on the javascript side but rather on your CSS. Your Valid class must be declared AFTER your Error class....

I spent 2 hours looking for the problem on JS but it's on CSS.... argh....

I've finally figured this out myself. Looking at the source-code for the validate plugin, if you remove the "error" class from the valid label, the label will not be reused when it revalidates, instead it will create a new label.

So my way of working around that was to remove the .removeClass() from my success function and to modify my stylesheet's valid class to use !important to override items from the error class that were different.

New validate function:

$("form").validate({
    success: 
        function(label) {

            if (label.attr('for') == "username") {
                var element = '#' + label.attr('for');
                label.addClass("valid").text("Username available");
            } else {
                label.addClass("invisiblevalid"); //ie. hide
            }


    }
});

$("#regForm").validate();

});

modified stylesheet code:

label.error {
background: url('check.gif') no-repeat;
color: #FF0000;
}
label.valid {
background: url('check.gif') no-repeat !important; 
color: #339900 !important;
}
label.invisiblevalid {
display: none !important;
}

I'm not sure exactly which plugin you're using. But I guess it should look something like this.

$("form").validate({
    success: 
        function(label) {

            if (label.attr('for') == "username") {
                var element = '#' + label.attr('for');
                label.removeClass("error").addClass("valid").text("Username available");
            } else {
                label.removeClass("error");
            }


    },
    error: 
        function(label) {

            if (label.attr('for') == "username") {
                var element = '#' + label.attr('for');
                label.addClass("error").removeClass("valid").text("Username unavailable");
            } else {
                label.addClass("error");
            }


    }
});

$("#regForm").validate();

Actually I don't think you want to wait until the form is revalidated you should set a function to the field itself so when ever a user has changed the text you remove the username available message but if you are validating often enough you wouldn't have to worry about that.

You JavaScript looks fine but you need to make sure your HTML is set up correctly using jQuery text with a label that doesn't look something like the following can cause problems.

<label id="myLabel"></label>

There is a short note in the comments of the jQuery page here.