How to use JQuery InputMask with HTML pattern

Question

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

Venomous

Answer 1

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.

Undefined

Answer 2

No need for using RegEx.

The plugin provides a way to add the mask on the element itself using data-inputmask attribute. In the value of mask 9 will match any digit, while 8 and 6 will match only those digits. By using this, we can fulfill the condition as below.

In HTML add:

<input id="phone" data-inputmask="'mask': '8 699 99 999'" />
                  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

The mask 8 699 99 999 will match numbers starting with 86 followed by any seven digits.

In JavaScript, add:

$('#phone').inputmask();

That's it!

$(document).ready(function() {
  $('#phone').inputmask();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.1.62/jquery.inputmask.bundle.js"></script>
<input id="phone" data-inputmask="'mask': '8 699 99 999'" />

Nymph

Answer 3

You have to use the keyup event and a regex like the following
No need for using libs

document.getElementById("phone").addEventListener("keyup", function(){
    // restart the match
    this.value = this.value.replace(/\s/g, "");
    // Assess the amount needed
    var v = this.value.match(/(\d)(\d{1,3})?(\d{1,2})?(\d+)?/);
    if(v){
      // Save the desired value depending on its existence
      v =  (v[1]?v[1]+(v[2]?" "+v[2]+(v[3]?" "+v[3]+(v[4]?" "+v[4]:""):""):""):"");
      // and yea!
      this.value = v;
    }
});

<input  type="text" id="phone" placeholder="8 600 00 000" required onkeypress='return event.charCode >= 48 && event.charCode <= 57 && this.value.length < 12' pattern="\b86" title="description" value="8 6"/>

Jumbala

Thank you for an answer, but this updates after button click, I need to achieve It when typing directly, without pressing button. – Venomous

You can add onkeyup event and do the job there instead of on form submit – Viewpoint

@avrilalejandro It would be better to add an explanation. – Skirt

Great, but I think this code has a problem with trying to remove the inputted characters. :) – Skirt