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
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.