AngularJS - validating a phone number in three languages

Question

I am trying to check phone numbers. Conditions are fields that are checked after the user enters the next name field. fiddle In addition, phone number numbers require an automatic tab for the next phone input field. [when entering the area code (3 digits), the focus should go to the next 3-digit phone input field). when you focus on the last 4 digits.

<form id="aidLocationForm" class="well form-inline"> <div class="control-group phone-group"> <label for="phone1" class="col-xs-12 col-sm-4 col-md-4 col-lg-4 col-xl-4 control-label">Primary contact number</label> <div class="controls"> <input type="text" value="" maxlength="3" ng-minlength="3" ng-maxlength="3" class="area-code input-mini aid-primary-phone1-lbl" aria-label="Primary contact number" pattern="/^[0-9]{3}$"> <input type="text" value="" maxlength="3" ng-minlength="3" ng-maxlength="3" class="area-code input-mini aid-primary-phone2-lbl" aria-label="Primary contact number" pattern="/^[0-9]{3}$"> <input type="text" value="" maxlength="4" ng-minlength="4" ng-maxlength="4" class="area-code input-mini aid-primary-phone3-lbl" aria-label="Primary contact number" pattern="/^[0-9]{4}$"> </div> </div> <div class="control-group"> <label for="primaryLocationName" class="col-xs-12 col-sm-4 col-md-4 col-lg-4 col-xl-4 control-label aid-primary-location-location-lbl">Primary Location Name</label> <!-- end of label --> <div class="controls"> <input type="text" name="primaryLocationName" id="primaryLocationName" class="col-xs-12 col-sm-9 col-md-6 col-lg-6 col-xl-6 aid-primary-location-name-input" ng-model="" required placeholder="Enter the city followed by location" size="50" maxlength="50" aria-disabled="true" aria-label="Primary Location Name"> </div> </div> <button type="submit" class="btn">Sign in</button> </form> 

Answer 1

For this you can use the directive with event handling.

Updated Fiddle

Key changes are as follows:

1) Download jQuery into your script before angular so that you can access jQuery selectors inside angular functions.

2) Wrap your entries in the container with the appropriate directive (Note: this can also be done with a single element with restrict: "E" instead of restrict: "A" and use the template property to define the child HTML)

3) Handle the input event on the inputs, and if the length exceeds the value in the maxlength property, focus the next input. It is really simple with jQuery, but can be done unnecessarily if you really want to.

4) There are a million ways to test inputs, but I have included a simple method.

HTML

 <div phone-input> <input type="text" value="" maxlength="3" class="area-code input-mini aid-primary-phone1-lbl" aria-label="Primary contact number" pattern="^[0-9]{3}$"> <input type="text" value="" maxlength="3" class="area-code input-mini aid-primary-phone2-lbl" aria-label="Primary contact number" pattern="^[0-9]{3}$"> <input type="text" value="" maxlength="4" class="area-code input-mini aid-primary-phone3-lbl" aria-label="Primary contact number" pattern="^[0-9]{4}$"> </div> 

Angular Directive

 .directive("phoneInput", function () { return { restrict: "A", link: function (scope, element, attrs) { function checkForErrors(input) { var errors = ""; if (!new RegExp(input.attr("pattern")).test(input.val())) { errors += `Field must contain ${input.attr("maxlength")} numbers!\n`; } return errors; } element.on("input", "input", function () { var trigger = $(this); if (trigger.val().length >= trigger.attr("maxlength")) { trigger.blur().next().focus(); } }); element.on("blur", "input", function () { var trigger = $(this); var errors = checkForErrors(trigger); trigger.attr("title", errors); if (trigger.val().trim() === "") { trigger.addClass("invalid-field"); trigger.attr("title", "Field cannot be empty!"); } else if (errors === "") { trigger.removeClass("invalid-field"); } else { trigger.addClass("invalid-field"); trigger.focus(); } }); } } })