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

There is a nice example of using an image when displaying the error here

http://jquery.bassistance.de/validate/demo/custom-methods-demo.html

It uses this css to how an image for the error

em.error {
  background:url("images/unchecked.gif") no-repeat 0px 0px;
  padding-left: 16px;
}

note this example has set

errorElement: "em"

so the css works, but look through the source and try it out

Answer 2

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:

<input type="text" class="pw" name="password" id="password" />
<input type="text" class="pw" name="confirmpassword" />

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/