Question

132

How to use JQuery InputMask with HTML pattern

rated 0 times [ 135] [ 3] / answers: 1 / hits: 19700 / 7 Years ago, fri, may 5, 2017, 12:00:00

I have HTML input box for phone numbers.

I'm using InputMask to format input 860000000 in following 8 600 00 000 when typing.

$(window).load(function()

{

   var phones = [{ mask: # ### ## ###}, { mask: # ### ## ###}];

    $('#phone').inputmask({ 

        mask: phones, 

        greedy: false, 

        definitions: { '#': { validator: [0-9], cardinality: 1}} });

});

I'm also using HTML pattern to check if numbers starts with 86 and there are total 9 digits, but with InputMask it stopped working, and can't achieve It in any way:

<label for=phone class=first-col>Mobile No.:</label>

<input type=text id=phone placeholder=8 600 00 000 required pattern=(86)d{7} />

And CSS to add green borders if valid:

input:required:valid {

    box-shadow: 0 0 5px #5cd053;

    border-color: #28921f;

}

Have you any ideas?

There is JS Fiddle

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

hadens

Add To Favorites

Follow

Total Points: 142

Total Questions: 98

Total Answers: 100

Location: Kenya

Member since Mon, Jun 14, 2021

3 Years ago

answered 7 Years ago susanajamiep · Accepted Answer

Well the mask you are using is formatting the input value, so if you write a number it will be formatted using this mask which means it will no longer match your pattern.

Solution:

So you just need to edit your pattern Regex so it matches the new formatted value, so use (8 6)d{2} d{2} d{3} as a pattern:

<input type=text id=phone placeholder=8 600 00 000 required pattern=(8 6)d{2} d{2} d{3} />

Demo:

Here's a working snippet:

input:required:valid {

	box-shadow: 0 0 5px #5cd053;

	border-color: #28921f;

}

<script src=https://code.jquery.com/jquery-1.12.4.js></script>

<script src=https://code.jquery.com/ui/1.12.1/jquery-ui.js></script>

<script src=https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.1.62/jquery.inputmask.bundle.js></script>

<script> 

$(window).load(function()

{

   var phones = [{ mask: # ### ## ###}, { mask: # ### ## ###}];

    $('#phone').inputmask({ 

        mask: phones, 

        greedy: false, 

        definitions: { '#': { validator: [0-9], cardinality: 1}} });

});

</script>

<label for=phone class=first-col>Mobile No.:</label>

<input type=text id=phone placeholder=8 600 00 000 required pattern=(8 6)d{2} d{2} d{3} />

And this is an updated working Fiddle.