Phone Number Validation Angularjs

Question

I am having a issue validating phone number. The phone number is a 10 digit string that should be populated in a three input field 1st input field - have only 3 digits only ( requires, can accept only numbers and max length 3) 2nd input field - have only 3 digits only ( requires, can accept only numbers and max length 3) 3rd input field - have only 4 digits only ( requires, can accept only numbers and max length 4)

and tab should be moved to next input field, when maximum number of characters have been implemented in the first one the fields should be red, when none of the above conditions are not meeting

<label for="phoneone" aria-label="Enter First 3 digits of your phone no."><input id="phoneone" type="number" required name="phoneone" class="phone-text-box" ng-model="user.phoneNumbercodeone"  ng-minlength="3" ng-maxlength="3" maxlength="3" ng-pattern="/^[0-9]*$/"></input></label>
                        <label for="phonetwo" aria-label="Enter second 3 digits of your phone no."><input id="phonetwo" type="number" required  name="phonetwo" class="phone-text-box" ng-model="user.phoneNumbercodetwo" ng-minlength="3" ng-maxlength="3" maxlength="3" ng-pattern="/^[0-9]*$/"></input></label>
                        <label for="phonethree" aria-label="Enter last 4 digits of your phone no."><input id="phonethree" type="number" required  name="phonethree" class="phone-text-box" ng-model="user.phoneNumbercodethree" ng-minlength="4" ng-maxlength="4" maxlength="4" ng-pattern="/^[0-9]*$/"></input></label>
                        <div class="clearfix" ></div>

how would i achieve the above validation conditions using input html tag

if you only want to validate by html tag should look something like this <input type="number" name="phone[]" min="3" max="3" tabindex="1" required > — aahhaa
i tried couple of conditions, but it isn't working for me. The pattern should be matching to only numbers as well — nikitha
please find the attached code snippet. The above code is not working for me. what is wrong with my code? — nikitha

Bruno Vilches Bruno Vilches · Accepted Answer · 2015-06-22T16:58:59

You should use input pattern validation. This can be done using the ng-pattern directive:

NgPattern sets pattern validation error key if the ngModel value does not match a RegExp found by evaluating the Angular expression given in the attribute value. If the expression evaluates to a RegExp object, then this is used directly. If the expression evaluates to a string, then it will be converted to a RegExp after wrapping it in ^ and $ characters. For instance, "abc" will be converted to new RegExp('^abc$').

Note: Avoid using the g flag on the RegExp, as it will cause each successive search to start at the index of the last search's match, thus not taking the whole input value into account.

Phone Number Validation Angularjs

2 Answers