Phone number validation using angularJS on clicking submit button in a form

Question

<label>Phone Number:</label>
     <input type="number" name="mobileNo" ng-minlength="10" ng-maxlength="10" required/>

I have problem with this I am trying a lot to make the entered phone number validation on clicking submit button and I was not able to validate the phone number.

The previous questions are showing weather the number is valid on not as we start entering the number but they are not validating on clicking the submit action button. Even I tried those examples and this is similar but not duplicate.

Thanks if any help in advance

Use ngPattern or custom directive. Both way are quite simple the first one might be simpler though, depends on your needs. — dfsq, Feb 21 '16 at 11:07

Gautam Patadiya · Answer 1 · 2016-02-21T11:54:49.120

0

You can try this:

<div ng-app ng-controller="formCtrl">
  <form name="myForm" ng-submit="onSubmit()">
   <input type="number" ng-model="mobile_number" name="mobile_number" ng-pattern="/^^([0|\+[0-9]{1,5})?([7-9][0-9]{9})$/" required>
   <span ng-show="myForm.mobile_number.$error.pattern">
   Not a valid number!
   </span>
   <input type="submit" value="submit"/>
  </form>
</div>

JS :-

function formCtrl($scope){
 $scope.onSubmit = function(){
 alert("form submitted");
 }
}

Check out here : https://plnkr.co/edit/LzKbnLkECps6DwjW6gtH?p=preview

edited Feb 21 '16 at 11:54

answered Feb 21 '16 at 11:20

Gautam Patadiya

1,401
14
19

`ng-pattern="/^[0-9]{1,7}$/"` how it works ? – ojus kulkarni Feb 21 '16 at 11:42
It is regular expression pattern.I updated it for better performance. For more information you can check here : https://docs.angularjs.org/api/ng/directive/ngPattern – Gautam Patadiya Feb 21 '16 at 11:57

Phone number validation using angularJS on clicking submit button in a form

1 Answers1