ng-pattern for mobile number validation

Question

I am trying to implement mobile number validation on a Visualforce page using Angular JS, but am having problems getting my head around how to write the regex expression.

The requirements, as given to me, are fairly simple:

The number should be 10 digits long (I've already set the maxlength attribute on the field so this one is kind of taken care of already) It should start with 04 (as it is an Australian mobile) Only numbers should be allowed.

The regex expression I am using (in the ng-pattern attribute for my phone number input field) is:

^/(04)[0-9]{10}/$

This works up to a point - it does not allow anything other than numbers and does let me enter a 10 digit number starting with 04. However it also lets me enter numbers starting with, for example, 02, 03 etc....

Probably quite a simple thing I'm missing but I've had a look at quite a few sites, including this one, and can't find the answer.

Any help would be hugely appreciated as this one has caused me a few grey hairs already.

Answer 1

For starters I had to create a whole js function for it... and it does validates as you type. here is my full code I hope this can help you get where you need. This function gets the string every time a key is beign pressed and it allows the carrete to move front, back, delete and backspace. check it out and let me know if it helps you. you can run it on any situation and this is how I would add the "04" validation

//phone validation 10 digits and parenthesis (344)567-0011
function validatePhone(inputId) {
  let validKey = false;
  const input = document.getElementById(inputId);
  let enteredDigits = input.value;

  //switch to remove the country code added by default on autoComplete forms.
  if (enteredDigits.length > 10 && enteredDigits[0] == '+') {
    switch (enteredDigits.length) {
      case 12:
        enteredDigits = enteredDigits.slice(2);
        break;
      case 13:
        enteredDigits = enteredDigits.slice(3);
        break;
      case 14:
        enteredDigits = enteredDigits.slice(4);
        break;
      default:
        enteredDigits = enteredDigits.replace(/\D+/g, '');
    }
  }

  let newPhone = enteredDigits.replace(/\D+/g, ''); // This replace any character that is not a number.
  const key = event.keyCode || event.charCode; // Get the pressed key.
  let caretPosition = input.selectionStart; // get the carret position.

  // splits, removes the "-" and converts from array to string and gives the needed digits.
  const areaCode = newPhone.split('').splice(0, 3).toString().replace(/,/g, '');
  const threeDigit = newPhone.split('').splice(3, 3).toString().replace(/,/g, '');
  const fourDigit = newPhone.split('').splice(6, 8).toString().replace(/,/g, '');

  // Moving carret on different positions. when the numeric keys are being pressed.
  // Key >= 48 && key <= 58 number keys.
  // Key >= 96 && key <= 105 numeric path number keys.
  if ((key >= 48 && key <= 58) || (key >= 96 && key <= 105)) {
    validKey = true;

    if (threeDigit.length > 0) {
      if (caretPosition == 1) {
        caretPosition = caretPosition + 1;
      } else if (caretPosition == 4 && newPhone.length == 4) {
        caretPosition = caretPosition + 2;
      } else if (caretPosition == 4 && newPhone.length >= 5) {
        caretPosition = caretPosition + 1;
      } else if (caretPosition == 5) {
        caretPosition = caretPosition + 1;
      } else if (caretPosition >= 2 && caretPosition <= 3 && newPhone.length <= 4) {
        caretPosition = caretPosition + 1;
      }
    }
    if (fourDigit.length > 0 && caretPosition == 9) {
      caretPosition = caretPosition + 1;
    }
  }

  // Key = 8 = Backspace.
  else if (key == 8) {
    validKey = true;

    if (caretPosition == 3 && newPhone.length == 3) {
      caretPosition = caretPosition - 1;
    } else if (caretPosition == 2 && newPhone.length == 3) {
      caretPosition = caretPosition - 1;
    } else if (caretPosition == 1 && newPhone.length == 3 && threeDigit.length == 0) {
      caretPosition = caretPosition - 1;
    }
  }

  // Key = 46 = Delete. Key =37  = ArrowLeft. Key = 39 = ArrowRight.
  else if (key == 46 || key == 39 || key == 37) {
    validKey = true;

    // Delete
    if (key == 46) {
      if (caretPosition == 0 && newPhone.length > 3) {
        caretPosition = caretPosition + 1;
      } else if (caretPosition == 1 && newPhone.length == 3) {
        caretPosition = caretPosition - 1;
      } else if (caretPosition == 2 && newPhone.length == 3) {
        caretPosition = caretPosition - 1;
      } else if (caretPosition == 3 && newPhone.length == 3) {
        caretPosition = caretPosition - 1;
      } else if ((newPhone.length >= 4 && caretPosition == 4) || (newPhone.length >= 4 && caretPosition == 8)) {
        caretPosition = caretPosition + 1;
      }
    }
  }

  //here is the validation for the country that you need.
  if ((newPhone.length == 1 && newPhone[0] != '0') || (newPhone.length >= 2 && newPhone[1] != '4')) {
    alert('Must start with 04');
    newPhone = '';
  }

  // Adding the special character for formatting.
  if (threeDigit.length > 0 && fourDigit.length == 0) {
    newPhone = '(' + areaCode + ')' + threeDigit;
  } else if (fourDigit.length > 0 && threeDigit.length == 3) {
    newPhone = '(' + areaCode + ')' + threeDigit + '-' + fourDigit;
  }

  if (!validKey) {
    caretPosition = caretPosition - 1;
  }

  // Set new values.
  newPhone = newPhone.substring(0, 13);
  input.value = newPhone;
  input.focus();
  input.setSelectionRange(caretPosition, caretPosition);
}

<form name="myForm"
  onsubmit="return validateForm()"
  method="post">

  Phone number: <input type="text"
    id="phoneNumber"
    name="fPhone"
    onkeyup="validatePhone('phoneNumber')">
  <input type="submit"
    value="Submit">
</form>

Answer 2

Try using this pattern

Use this in ur HTML file:

<input type="text" (keypress)="keyPress($event)" minlength=10 maxlength=10>

Use this in ur JS file:

keyPress(event: any) {
    const pattern = /[0-9\+\-\ ]/;
    let inputChar = String.fromCharCode(event.charCode);
    if (event.keyCode != 8 && !pattern.test(inputChar)) {
    event.preventDefault();
    }
}

Answer 3

Try this one:

Mobile Number :

//inside view:
<input type="text" class="form-control" ng-model="mobileNo" name="mobileNo" ng-pattern="regEx" />

//inside controller:
$scope.regEx="/^[0-9]{10,10}$/";