AngularJS - Three input field phone number validation

Question

I'm trying to validate the phone number fields. Conditions are the fields gets validated once the user enter the next location name field. fiddle Also phone number fields need auto tab to the next phone input field. [on entering the area code (3 digit) focus should go on to the next 3 digit phone input field). when done focus on to the last 4 digit.

<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

You can use a directive with event handling to accomplish this.

Updated Fiddle

The key changes include the following:

1) Load jQuery in your fiddle before angular so you get access to jQuery's selectors inside of angular functions.

2) Wrap your inputs in a container with the proper 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. This is really simple with jQuery, but can be done without if you really want to.

4) There are a million ways to do validation on the 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();
        }
      });
    }
  }
})