CODEWITHSUNDEEP
jqueryregexjquery-inputmask
Gayan Fernando
Gayan Fernando

Reputation: 591

Validate phone number with starting from certain number only in inputmask jquery

I am trying to validate phone number as following. After 61 it should be starting from 2 or 3 or 6 only. Examples are as follows. 61-245623463 : valid 61-345623456 : valid 61-445623423 : not valid 61-645623485 : valid

My current code is as follows. But it doesen't work.

$("#mask_aus_phone").inputmask({mask: "61-2 9999 9999"});
$("#mask_aus_phone").inputmask({mask: "61-3 9999 9999"});
$("#mask_aus_phone").inputmask({mask: "61-6 9999 9999"});

I tried as follows also. But it also doesn't work.

$("#mask_aus_phone").inputmask({mask: "61-{2,3,6} 9999 9999"});

Can someone help me to validate this.

Upvotes: 3

Views: 3149

Answers (2)

Armfoot
Armfoot

Reputation: 4921

Instead of using regex, you can build a small dictionary through the recent phone extension:

Inputmask.extendAliases({
  my_phone: {
    alias: "abstractphone",
    placeholder: '#',
    showMaskOnFocus: false,
    phoneCodes: [{
      mask: "61-2 #### ####",
      region_name: 'Dois',
      desc_en: "Second region"
    }, {
      mask: "61-3 #### ####",
      region_name: 'Três',
      desc_en: "Third region"
    }, {
      mask: "61-6 #### ####",
      region_name: 'Seis',
      desc_en: "6th region"
    }],
    onKeyValidation: function() {
      let mt = $(this).inputmask("getmetadata");
      $('#jqma span').text(
       mt['region_name']+' - '+mt['desc_en']).css(
       'color', `#${Math.floor(Math.random() *
       0x1000000).toString(16).padStart(6, 0)}`
      );
      console.log(mt);
    }
  }
});
$('#jqma input').inputmask("my_phone");
span {color:#37e;font-weight:bold;transition: color 1s}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://rawgit.com/RobinHerbots/jquery.inputmask/4.x/dist/inputmask/inputmask.js"></script>
<script src="https://rawgit.com/RobinHerbots/jquery.inputmask/4.x/dist/inputmask/inputmask.extensions.js"></script>
<script src="https://rawgit.com/RobinHerbots/jquery.inputmask/4.x/dist/inputmask/inputmask.phone.extensions.js"></script>
<script src="https://rawgit.com/RobinHerbots/jquery.inputmask/4.x/dist/inputmask/jquery.inputmask.js"></script>
<script src="https://rawgit.com/RobinHerbots/jquery.inputmask/4.x/dist/inputmask/phone-codes/phone.js"></script>

<p id="jqma"><label>Extended phone alias: <input placeholder="61-# #### ####"/></label> <span/>
</p>

This dynamic validator example was based in this answer. The explanation is as follows:

  • the phone extension is like an Abstract Factory, which is referenced through the alias: "abstractphone";
  • phone.js "implements" the alias phone, which has predefined rules such as numeric/integer only masks (if most of the world's phone numbers were valid for that input, this would be enough to validate them all: $('#mask_aus_phone').inputmask('phone'));
  • by extending an alias with the alias property abstractphone, one can define several items containing specific masks with related metadata that can be dynamically fetched when validating.

Upvotes: 0

Tim Biegeleisen
Tim Biegeleisen

Reputation: 521684

You can feed a regex into the input mask:

$('#mask_aus_phone').inputmask('Regex', { 
    regex: "^61-[236]"
});

I used the regex ^61-[236], but you could also use a positive lookahead and assert that the number following 61- is either 2, 3, or 6:

^61-(?:(?=[236]).)+

Update:

You didn't make it explicit, but if you want to limit the total number of digits after 61- to 9, then you can try:

^61-[236]\d{8}$

Demo:

Regex101

Upvotes: 2

Related Questions