errorPlacement doesn't 'fire' always when errors occur (jQuery Validation Plugin)

errorPlacement doesn't 'fire' always when errors occur (jQuery Validation Plugin)

Hi,

I have a simple validation for my input elements: 
  1. $("#forma").validate({ errorClass: "red" }); $("#input").each(function(index, elem) { var rules = { required:true }; $(elem).rules("add", rules); });
So, when error occurs - error messages are displayed and those error messages are inside label elements. For example, if you forget to enter the last name and you click submit button - this label element will be added: 
  1. <label id="lastname-error" class="red" for="lastname">This field is required.</label>
I would like to add empty span element inside of those labels, at the beginning (prependTo) with the background-image and other CSS properties, so it will look like this: 

  1. <label id="lastname-error" class="red" for="lastname"><span class="myspan"></span><This field is required.</label>
So, what I did is the following: 

  1. $("#forma").validate({ errorClass: "red", errorPlacement: function(error, element) { var html = '<span class="myspan"></span>' + $(error).text(); $(error).html(html).insertAfter(element); } });

And this works - span element is added within the error label container, but, if you focus that input and don't type (change) - span element will disapear, and we will again have just label, without span .

This probably means that errorPlacement doesn't 'fire' everytime when errors occur...

So, I tried with highlight:

  1.  highlight: function(element, errorClass) { $("label."+errorClass).prepend('<span class="myspan"></span>') }

And it works, but it adds more then 1 span within the error label.

Do you know how can I solve this problem?


The reason why I want to instert span element with some class within error label is because I want to put background-image to those spans (right arrow picture that will point to input)...

  1.         .myspan {
                background-image: url("images/arrow-left.png");
                padding-right: 26px;
                background-repeat: no-repeat;
            }