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>

Your fiddle isn't functional. Please post a working version. — Phix
– Phix, Commented May 16, 2017 at 17:35
Did you even check the console before posting? It doesn't work! — Phix
– Phix, Commented May 16, 2017 at 18:41
@Phix -- My bad.. i have added basic validations for checking length and added jquery.jsfiddle.net/priyaa2002/mvsyde1o/ — dragonfly
– dragonfly, Commented May 16, 2017 at 19:29
@dragonfly Hey, check out my solution and let me know if that's what you were looking for. — mhodges
– mhodges, Commented May 19, 2017 at 15:07

mhodges · Accepted Answer · 2017-05-19 19:05:53Z

7

+50

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();
        }
      });
    }
  }
})

edited May 19, 2017 at 19:05

answered May 18, 2017 at 17:57

mhodges

11.2k2 gold badges32 silver badges48 bronze badges

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

3 Comments

dragonfly Over a year ago

phone field can accept only number and when invalid should display error message. But the fiddle doesn't show any error message

mhodges Over a year ago

@dragonfly Probably good information to update your question with. I will update my answer accordingly

mhodges Over a year ago

@dragonfly Edited with validation.

Collectives™ on Stack Overflow

AngularJS - Three input field phone number validation

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related