jQuery Validation Plugin: Invoke errorPlacement function when onfocusout, keyup and click

Question

I am using the jquery validation plugin and want to use the errorPlacement function to add error messages to the fields title attribute and display just a ✘ next to the fiel

Answer 1

Thanks jitter,

I done some digging around and found the same problem.

I managed to get it working by "hacking" the showLabel function in the jquery.validation.js. It's not pretty but works.

Overriding the showErrors function option would prevent me from having to change the plugin code so I will take a look.

Here is the code I used for the showLabel method:

     showLabel: function(element, message) {

            // look for existing error message
            var label = this.errorsFor( element );
            // existing error exist?
            if (label.length) {
                // refresh error/success class
                label.removeClass().addClass( this.settings.errorClass );

                // check if we have a generated label, replace the message then
                label.attr("generated");

                // is message empty?
                if(!message)
                {
                    // add tick glyph
                    label.html("✔");

                    // wipe element title
                    $(element).attr('title', message)
                }
                else
                {
                    // clear error html and add cross glyph
                    label.html("✘");

                    // update element title
                    $(element).attr('title', message)
                }

                // && label.html(message);
            } 
            else {
                // create label
                label = $("<" + this.settings.errorElement + "/>")
                    .attr({"for":  this.idOrName(element), generated: true})
                    .addClass(this.settings.errorClass)
                    .html(message || "");
                if ( this.settings.wrapper ) {
                    // make sure the element is visible, even in IE
                    // actually showing the wrapped element is handled elsewhere
                    label = label.hide().show().wrap("<" + this.settings.wrapper + "/>").parent();
                }
                if ( !this.labelContainer.append(label).length )
                    this.settings.errorPlacement
                        ? this.settings.errorPlacement(label, $(element) )
                        : label.insertAfter(element);
            }
            if ( !message && this.settings.success ) {
                label.text("");
                typeof this.settings.success == "string"
                    ? label.addClass( this.settings.success )
                    : this.settings.success( label );
            }
            this.toShow = this.toShow.add(label);
        }

Answer 2

Your problem is that the plugin only calls the errorPlacement function once for each element which is validated. Namly when the error label for the element is first created. Afterwards the plugin just reuses the already present label and just replaces the html inside (or hides the error label if the element is now valid). That's why your cross gets removed and the actual error message is shown.

Just to make sure the flow of the plugin is clear.

1. element (no errorlabel yet)
2. element gets validated at some point
3. plugin creates error label and calls errorPlacement function
4. element "cross" (error message in title)
5. Element gets focus and you change something
6. plugin revalidates element
7. Sees that error label was already created (and placed)
8. plugin just calls label.html(message) instead of removing old label and readding it

So you see your problem is a kind of optimization the plugin does to save some unnecessary inserts/removes of error labels. Which makes sense too.

You can check what I said by looking at the validation-plugin-sourcecode

jquery.validate.js v1.6 check in function showLabel lines 617-625 for the relevant pieces.

---

A possible solution could be to additional provide a custom showErrors callback which solves the problem with brute force.

Something along the lines of

$("#send-mail").validate({
...
    showErrors: function(errorMap, errorList) {
        for (var i = 0; errorList[i]; i++) {
            var element = this.errorList[i].element;
            //solves the problem with brute force
            //remove existing error label and thus force plugin to recreate it
            //recreation == call to errorplacement function
            this.errorsFor(element).remove();
        }
        this.defaultShowErrors();
    }
...
});

Maybe there is a cleaner solution to this but this should do it and give you time to investigate a better solution.