igorescobar / jQuery-Mask-Plugin

A jQuery Plugin to make masks on form fields and HTML elements.
http://igorescobar.github.io/jQuery-Mask-Plugin/
Other
4.77k stars 1.42k forks source link

Mask pattern error add class valid or invalid #714

Open tilparkmustafa opened 5 years ago

tilparkmustafa commented 5 years ago

Hello friends, Hello el patron,

I want to add a class when an error occurs.

I give examples;

my mask:

$('.mask-gsm').mask('Z(500) 000 0000', {
        "placeholder": "0(5__) ___ ____",
        translation: {
            'Z': {
                pattern: /[0]/,
                optional: true
            }
        },
};

my input value:

0(555)123 4567 (555)123 4567 class="valid" will be added as in the example above.

0(555)123 0(555)123 45 (555)123 45 class="invalid" will be added as in the example above.

this is what i want to do:

if(mask REGEX OR PATTERN == true) {
   $(this).addClass('valid');
} else {
   $(this).addClass('invalid');
}
tilparkmustafa commented 5 years ago

I found a solution. But the solution I found is not very useful.

So it's not programmable. But it worked as I wanted.

/** mask-gsm */
    $('.mask-gsm').mask('Z(500) 000 0000', {
        "placeholder": "0(5__) ___ ____",
        translation: {
            'Z': {
                pattern: /[0]/,
                optional: true
            }
        },
        onChange: function(value, event, currentField, options) {
            // eger kutudaki deger asagidaki MATCH ile ayni ise .valid sınıfını ekle
            if (value.match(/0?\([0-9]{3}\) [0-9]{3} [0-9]{4}/) & currentField.attr('data-mask-style') != "false" ) {
                $(currentField).removeClass('error');
                $(currentField).addClass('valid');
            }
        }
    });
        // eger kutudan imlec cikiyor ise ve MATCH ile ayni değil ise .error sınıfını ekle
        $('.mask-gsm').blur(function() {
            if (!$(this).val().match(/0?\([0-9]{3}\) [0-9]{3} [0-9]{4}/) & $(this).attr('data-mask-style') != "false") {
                $(this).removeClass('valid');
                $(this).addClass('error');  
            }
        });
CristianWulfing commented 4 years ago

I was trying to use the callback "onInvalid" to do it, but it seems doesn't work..