JQuery validation plug-in: How to make the error message an attribute in the error label?

Question

Right now I've got the validation plug-in to display labels with one of two background images depending on if the field is valid or not. However, the error text is still inserted in to the "not valid" labels (the "valid" labels don't have any error messages for them by default).

I want to remove the text from displaying on a "not valid" error label, and place it inside the label as a value for an attribute. This way, I can use the tooltip plugin to display it as a tooltip on mouseover.

The problem is, I don't know how to go about doing this.

I know I have to "intercept" the error messages in the messages validator option to stop them from appearing.That option can take a function for a given requirement that returns an error string (which i'll set to ""). However (as far as I know), I don't have access to the error label object from there to insert a message as an attribute . The description for the option states that the function takes "the element" as the second parameter, but I'm not sure if that means the DOM element or the JQuery.val rule element:

messages:

Key/value pairs defining custom messages. Key is the name of an element, value the message to display for that element.Instead of a plain message another map with specific messages for each rule can be used. Overrides the title attribute of an element or the default message for the method (in that order). Each message can be a String or a Callback. The callback is called in the scope of the validator and with the rule's parameters as the first and the element as the second arugment, it must return a String to display as the message.

I assumed it was the field DOM element and tried to do something like:

 //#createAccount is the id for the form
 messages: {
               eMail: {
                   required: function(param,element){
                       $("#createAccount label[class=\"error\"][for=" + element.getAttribute("name") + "]")
                       .attr("message","Required"); return "";},

                   email: function(param,element){
                       $("#createAccount label[class=\"error\"][for=" + element.getAttribute("name") + "]")
                       .attr("message","Not valid email"); return "";}
                    }
           },
            success: "valid"
    ...
    ...

But for some reason it's manipulating the success validator option, which I use to choose which background image to display. So it's marking things valid that it shouldn't.

I was just wondering if this was the right way to go about it, or if there is an easier way

Answer 1

Ok, I figured out what was wrong. It seems that if you submit a null string ("") as the message for an element, the plug-in will take that to mean that the field is valid. So you can do what you have to do inside the function as long as you return anything other than "" or '' (I ended up returning "\\0", which is not a printable character)