Jquery validation: call equalTo method from a custom validation method

Question

I want a validation method which will check that two fields are equal then hide one of them. At the moment I use equalTo to check they are equal. So I planned to add a validation method which delegates to equalTo and hides the field depending on the result.

The problem I have is that I cannot work out how to call equalTo on the correct instance of the validator. When I call it, I always see an error in equalTo, "this.settings is not defined". This is equalTo

 // http://docs.jquery.com/Plugins/Validation/Methods/equalTo
        equalTo: function( value, element, param ) {
            // bind to the blur event of the target in order to revalidate whenever the target field is updated
            // TODO find a way to bind the event just once, avoiding the unbind-rebind overhead
            var target = $(param);
//error here   
            if ( this.settings.onfocusout ) {
                    target.unbind(".validate-equalTo").bind("blur.validate-equalTo", function() {
                        $(element).valid();
                    });
                }
                return value === target.val();
        },

Here is my code.

// validate form
$.validator.addMethod("equalToAndHide", function(value, element, param) {
   //this does not work
   var result = $.validator.methods.equalTo.call(value, element, param);
   if(result === true){
        $(element).hide();
   }
   return result; 
 }, $.validator.format("Values must be equal_???"));

 $('form').validate({
                        rules : {

                        confirmEmail : {
                            equalToAndHide : utils.byId("alternateEmail")
                        }
                    },
                    submitHandler : function(form) {
                        accordionAjax.post($(form));
                    }
                });

I would prefer to leave equalTo as it is rather than override it and amend the call to this.settings, if possible.

Sparky · Accepted Answer · 2013-06-05 13:53:26Z

2

You don't need to call the original equalTo from within your custom method... just write a whole new function using the original as your basis.

This is the default equalTo function...

function( value, element, param ) {
    var target = $(param);
    if ( this.settings.onfocusout ) {
        target.unbind(".validate-equalTo").bind("blur.validate-equalTo", function() {
            $(element).valid();
        });
    }
    return value === target.val();
}

Put it inside your custom method and tweak it to suite your needs...

$.validator.addMethod("equalToAndHide", function(value, element, param) {
        var target = $(param);
        if ( this.settings.onfocusout ) {
            target.unbind(".validate-equalTo").bind("blur.validate-equalTo", function() {
                $(element).valid();
            });
        }
        return value === target.val();
        $('#whatever').hide();
}, $.validator.format("Values must be equal_???"));

answered Jun 5, 2013 at 13:53

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

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

4 Comments

Mark Chorley Over a year ago

Thanks, that will work. However I would prefer to use the real equalTo function if possible rather than fork it. That way I will get the benefit of any improvements when the validation plugin is upgraded. Since there's a TODO in the equalTo function I think that's fairly likely to happen.

Sparky Over a year ago

@MarkChorley, This is your best option. I've answered hundreds of SO questions about the jQuery Validate plugin and read hundreds more. I've never seen it done the way you're requesting simply because it's not possible.

Mark Chorley Over a year ago

Thanks for your help. It is possible to call a jQuery Validate method like this because I am doing so when I get the error. The only problem is resolving the settings reference: were that not present in equalTo then my code would work. See this question for a similar example: stackoverflow.com/questions/7392875/… and this one for some information on instances of the Validator: stackoverflow.com/questions/1510165/…

Sparky Over a year ago

@MarkChorley, thank-you, I've never seen this undocumented feature before. Regardless, I don't think I'd worry about equalTo changing so much in future versions... your custom method should still work.

Collectives™ on Stack Overflow

Jquery validation: call equalTo method from a custom validation method

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related