CODEWITHSUNDEEP
jquery
Naveed
Naveed

Reputation: 42093

jQuery validation plugin: How to call a function when a field is validated

In this function I am displaying an error image in next td of table when a field is not validated. It is displaying error images correctly but when a field is valided, it's error image is not removed from next td. I tried to use "success" option but it is not working. Can anyone tell me the exact code.

$(obj).find("form").validate({

    showErrors: function(errorMap, errorList) {
        for ( key in errorMap ) {
                $('#' + key).parent().next().html("<img id='exclamation' src='images/exclamation.gif' />");
        }
    }

});

Upvotes: 1

Views: 6312

Answers (3)

Naveed
Naveed

Reputation: 42093

After a time I got my answer. Infact I want to display an image with a callout(containing error) in next column(td) of input field that is not validated by validation plugin. And when an input field is validated, this error image should be removed with its callout on it.

Here is my solution.

$("form").validate({

    errorPlacement: function(error, element) {

        //There should be an error
        if(error.html() != ''){         

            element.parent().next().html("<img id='exclamation' src='images/exclamation.gif' />").callout({
                width       : 200,
                cornerRadius    : 8,
                className   : "validationCallout",
                content     : error,
                align       : "left",
                nudgeHorizontal : -14,
                nudgeVertical   : 4,
                arrowHeight : 6
            });     
        }
    },

    success: function( label ) {
        $(obj).find(".valid").parent().next().html("");         //remove error image from next column(td) of input containing "valid" class
        $(obj).find(".valid").parent().next().closeCallout();   //remove callout on error image from next column(td) of input containing "valid" class
    }

});

This code may be complex but it is working for me now. A callout plugin is used here that is not related to the question but may help anyother. Can anyone make it more simple?

Upvotes: 0

Ken Egozi
Ken Egozi

Reputation: 1835

You might want to look at the errorPlacement option.

see the Remember the milk demo

from there:

errorPlacement: function(error, element) {
    if ( element.is(":radio") )
        error.appendTo( element.parent().next().next() );
    else if ( element.is(":checkbox") )
        error.appendTo ( element.next() );
    else
        error.appendTo( element.parent().next() );
}

customise it in order to place your error message in the right place (the adjacent td)

Upvotes: 3

kgiannakakis
kgiannakakis

Reputation: 104188

Create a function that removes all error images. Call it at the beginning of both the success and showErrors methods.

Upvotes: 1

Related Questions