jQuery-Mask-Plugin icon indicating copy to clipboard operation
jQuery-Mask-Plugin copied to clipboard

Mask pattern error add class valid or invalid

Open tilparkmustafa opened this issue 6 years ago • 2 comments

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 avatar Jun 16 '19 16:06 tilparkmustafa

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

tilparkmustafa avatar Jun 17 '19 12:06 tilparkmustafa

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

CristianWulfing avatar Oct 05 '19 09:10 CristianWulfing