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

Question

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' />");
        }
    }

});

Ken Egozi · Accepted Answer · 2009-08-07 11:33:54Z

3

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)

answered Aug 7, 2009 at 11:33

Ken Egozi

1,84511 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Naveed Over a year ago

I have to use my own error messages(images with callout plugin). Therefor I am using showErrors option to use any thing in foor loop. Can you tell me that how can I show my own error messages/images with errorPlacement option.

Ken Egozi Over a year ago

I believe you can, instead of error.appendTo, do something like getMySpecialMarkupFrom(error).appendTo(wherever)

kgiannakakis · Accepted Answer · 2009-08-07 11:30:48Z

1

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

answered Aug 7, 2009 at 11:30

kgiannakakis

104k28 gold badges163 silver badges197 bronze badges

3 Comments

Naveed Over a year ago

success: function() { alert('Success'); } //even this alert is not shown in my above function.

kgiannakakis Over a year ago

Even if a single validation fails, success won't be called. Are all fields validating OK?

Naveed Over a year ago

success is called when a single field is validated also. finally I got my answer. please see below.

Naveed · Accepted Answer · 2009-08-11 06:18:40Z

0

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?

edited Aug 11, 2009 at 6:18

answered Aug 11, 2009 at 6:13

Naveed

42.3k31 gold badges101 silver badges132 bronze badges

1 Comment

Ken Egozi Over a year ago

You might want to switch $(obj).find(".valid").parent().next().html(""); $(obj).find(".valid").parent().next().closeCallout(); with $(obj).find(".valid").parent().next() .html("") .closeCallout();

Collectives™ on Stack Overflow

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

3 Answers 3

2 Comments

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related