jQuery Masked Input - Is it possible to retrieve the mask?

Question

I'm using jQuery Masked Input Plugin with jQuery Validation Plugin. When a field of the form loses focus, the jQuery Validation Plugin shows a message but that's not happening to the fields that are bound to masks, perhaps because the blur event happens and verifies that the field is not empty, actually the field is filled out with the mask.

So I override the required method of the validation plugin so as to verify the mask too. Since I have telephones masks I cannot hard code a mask, I would have to call a method in the plugin that returns me the mask bound to the field. I didn't find the documentation of the masked input plugin and nobody with my problem.

Does anyone know if there's a method that return me the mask itself bound to the field?

@Sparky My problem is not with validation plugin, actually, the method I wrote works just fine with the hard coded mask. — Philippe Gioseffi, Feb 27 '14 at 00:07
That doesn't matter. It would be beneficial to others for you to post a concise code example here. — Sparky, Feb 27 '14 at 00:26
Why would be benefical if my question is only to know if exists a method that retrieves the mask since the plugin itself does not have a documentation? — Philippe Gioseffi, Feb 27 '14 at 14:28

score 1 · Answer 1 · answered Feb 26 '14 at 20:52

1

I use a masked input for phone fields and verify that there is a phone number present with minlength like so:

...

phone: {
    required:  true,
    minlength: 17
},

My mask looks like this:

+1 (XXX) XXX-XXXX

answered Feb 26 '14 at 20:52

Tomanow

7,247
3
24
52

But this way I would have to add a rule to every field in the system, besided, I have other inputs masked to, but that's a possiblem solution. – Philippe Gioseffi Feb 26 '14 at 20:59

score 0 · Answer 2 · answered Feb 26 '14 at 23:01

Given the way the plug-in ( jQuery Masked Input Plugin) is built Tomanow's approach is the way to go.

If the input size can only have the same amount of characters than the mask.

I would suggest this method :

Complementary plugin

(function($) {
$.fn.extend({

        mask2: function(mask, settings){
           //store in data
            this.data('data-mask',mask);
            this.data('data-maskLength', mask.length);

            //add data attributes as html markups (optional)
            this.attr('data-mask',mask);
            this.attr('data-maskLength', mask.length);

           // add validator rule (see section add custom method; i haven't test it yet you can remove it if necessary)

            $( "#myinput" ).rules( "add", {
               maskRule: true

            });

           // add original mask plugin
           return this.mask(mask, settings);
        }
});    
})(jQuery);

Now instead of using mask you use mask2

$("#date").mask2("99/99/9999");

Add a custom Validation method

The easiest way is to use the data-maskLength key , (you may need to put this on top):

jQuery.validator.addMethod("maskRule", function(value, element, params) {

  return value.length == element.data("data-maskLength");
}

I havent test the validation Method but at least you can retrieve the mask or its length

You can see what i did on JsFiddle

jQuery Masked Input - Is it possible to retrieve the mask?

2 Answers2