Inputmask(999) 999-9999 along with pattern(^([0-9]{10,20})$) is failing the patternMismatch.

[pushkar1701]

I am using inputmask (999) 999-9999 along with the pattern (^([0-9]{10,20})$). When I set the autoUnmask: true and tested the input value against the pattern, it is returning true. But even after that, the checkValidity method of form returning the form as invalid, and input with input mask returns this.validity.patternMismatch as true. Any solution? I have already used the following properties-

• autoUnmask
• clearMaskOnLostFocus
• removeMaskOnSubmit

[jrencz]

I think I just had the very same problem. @pushkar1701 if you didn't solve yours (or if you solved it by removing the pattern attribute, which is what my first thought way) the way to go may be to remove the mask on blur if it's complete

const mobilePhoneInputmask = new Inputmask(...);
const element = document.querySelector(...);

// Note: required to leave the unmasked value before native validation
// kicks in.
element.addEventListener('blur', ({target}) => {
    if (target?.inputmask.isComplete()) {
        target.inputmask.remove();
    }
});

// Note: required to add mask back when user attempts to edit the field
// It is a consequence of removing input mask (if completed) on blur
element.addEventListener('focus', ({target}) => {
    if (!target.inputmask) {
        mobilePhoneInputmask.mask(target);
    }
});