jquery validate, image instead of text

jquery validate, image instead of text

Hello all,

I am trying to use jquery validate to place error icons instead of error text. Here is my code:

  1. <script type="text/javascript">
        var Locations = [];
        $('document').ready(function() {
            var validator = $('#MyForm').validate({
                rules: {
                    title: "required",
                    instructor: "required",
                    fromdate: {
                        required: true,
                        dateISO: true
                    },
                    todate: {
                        required: true,
                        dateISO: true,
                    },
                    location: "required",
                    category: "required",
                    locationID: "required",
                },
                invalidHandler: function(form, validator) {
                    return;
                },
                errorPlacement: function(label, element) {
                    console.debug(element.attr('id'));
                    label.attr('innerHTML', '<img class="errorimg" src="images/bullet_error.gif" alt="" width="16" height="14" />')
                    label.insertAfter('#'+element.attr('id'));
                    label.css('border','0px');
                }
            });
        });
    </script>
This is working when you submit the form for the first time, "errorPlacement" is called, but when submitting again the invalid form, the image is replaced by the error message its self, for example "This field is required".

How can i prevent error text to be placed in the label even when submitting an invalid form?

Thanks