jQuery Forum

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:
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;
           }