jQuery Validation plugin display success/fail images next to password

Question

I am using jQuery form validation using validation plugin. I have validate the password with minimum 7 characters and one capital and oe number.at the same time when i meet

Answer 1

Using a combination of errorPlacement, success, highlight and unhighlight callback functions along with CSS class's. The following seems very verbose, but it's in order to only display the images next to the password fields. It could be simplified greatly if you wanted to display the images next to all fields instead.

CSS:

.passError {
    background: url("bad.gif") no-repeat 0px 0px;
}
.passValid {
    background: url("good.gif") no-repeat 0px 0px;
}

HTML:

jQuery:

$(document).ready(function () {

    jQuery.validator.addMethod('mypassword', function (value, element) {
        return this.optional(element) || (value.match(/[A-Z]/) && value.match(/[0-9]/));
    }, 'Password must contain at least one capital and one number.');

    $('#loanRequestDetailsForm').validate({ // initialize the plugin
        errorPlacement: function (error, element) {
            error.insertAfter(element);
            if (element.hasClass('pw')) {
                element.next().removeClass('passValid').addClass('passError');
            }
        },
        success: function (label) {
            if (label.prev().hasClass('pw')) {
                label.text("ok!");
            }
        },
        highlight: function (element, errorClass, validClass) {
            if ($(element).hasClass('pw')) {
                $(element).next().removeClass('passValid').addClass('passError');
            } else {
                $(element).addClass(errorClass).removeClass(validClass);
            }
        },
        unhighlight: function (element, errorClass, validClass) {
            if ($(element).hasClass('pw')) {
                $(element).next().removeClass('passError').addClass('passValid');
            } else {
                $(element).removeClass(errorClass).addClass(validClass);
            }
        },
        rules: {
            password: {
                required: true,
                minlength: 7,
                mypassword: true
            },
            confirmpassword: {
                required: true,
                //minlength: 7, // <- redundant
                equalTo: "#password"
            }
        },
        messages: {
            password: {
                required: "Please provide a password",
                // use the placeholder {0} to automatically insert rule val
                minlength: "Your password must be at least {0} characters long"
            },
            confirmpassword: {
                required: "Please provide a password",
                equalTo: "Please enter the same password as above"
            }
        }
    });

});

Working Demo: http://jsfiddle.net/jtmDY/