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

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
– dfsq, Commented Feb 21, 2016 at 11:07

Gautam Patadiya · Accepted Answer · 2016-02-21 11:54:49Z

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, 2016 at 11:54

answered Feb 21, 2016 at 11:20

Gautam Patadiya

1,41214 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ojus kulkarni Over a year ago

ng-pattern="/^[0-9]{1,7}$/" how it works ?

Gautam Patadiya Over a year ago

It is regular expression pattern.I updated it for better performance. For more information you can check here : docs.angularjs.org/api/ng/directive/ngPattern

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related