Question

I’m using jquery validation plugin (which im fairly new to) and I need the error message to be displayed along with another custom image next to the label, if the field is in error.

This is what I have currently:

messages: {
    fname: "Enter your firstname", 
        lname: "Enter your lastname"
},
errorPlacement: function(error, element) {
        error.appendTo( element.parent("td").next());

},

how do i add code to also append an image with the text?

Answer 1

Here is the example

And the code for those example

// extend the current rules with new groovy ones

    // this one requires the text "buga", we define a default message, too
    $.validator.addMethod("buga", function(value) {
        return value == "buga";
    }, 'Please enter "buga"!');

    // this one requires the value to be the same as the first parameter
    $.validator.methods.equal = function(value, element, param) {
        return value == param;
    };

    $().ready(function() {
        var validator = $("#texttests").bind("invalid-form.validate", function() {
            $("#summary").html("Your form contains " + validator.numberOfInvalids() + " errors, see details below.");
        }).validate({
            debug: true,
            errorElement: "em",
            errorContainer: $("#warning, #summary"),
            errorPlacement: function(error, element) {
                error.appendTo( element.parent("td").next("td") );
            },
            success: function(label) {
                label.text("ok!").addClass("success");
            },
            rules: {
                number: {
                    required:true,
                    minlength:3,
                    maxlength:15,
                    number:true 
                },
                secret: "buga",
                math: {
                    equal: 11   
                }
            }
        });

    });

Also the piece of CSS

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