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

Posted by th3hamburgler on Stack Overflow See other posts from Stack Overflow or by th3hamburgler
Published on 2010-03-08T10:27:25Z Indexed on 2010/03/08 11:06 UTC
Read the original article Hit count: 472

Hi, 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 field.

This works great when the form is submitted with the submit button but when any of the following events are triggered: - onfocusout - click - onkeyup

The validation checks are run but it skips the errorPlacement function and adds the full error message after the field, like the default behaviour.

I am using the following code:

$("#send-mail").validate({
    debug: true,
    // set this class to error-labels to indicate valid fields 
    success: function(label) {
        // set text as tick
        label.html("✔").addClass("valid"); 
    }, 
     // the errorPlacement has to take the table layout into account 
    errorPlacement: function(error, element) {
        console.log("errorPlacement called for "+element.attr("name")+" field");
        // check for blank/success error
        if(error.text() == "")
        { 
            // remove field title/error message from element
            element.attr("title", "");
            console.log("error check passed");
        }
        else
        {
            // get error message
            var message = error.text();

            // set as element title
            element.attr("title", message);

            // clear error html and add cross glyph
            error.html("✘"); 

            console.log("error check failed: "+message);
        }
        // add error label after form element
        error.insertAfter(element);
    },
    ignoreTitle: true,
    errorClass: "invalid"
});

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about form-validation