AngularJS - stop user from typing invalid input

Question

I have a input text box and I would like to restrict the input to only alpha numerics (0-9, a-z, A-Z) and with max length of 15.

I am trying to acheive this in angularjs.

<input type="text" id="trackNumber" maxlength="15" ng-pattern="/^[a-zA-Z0-9]*$/" placeholder="" class="form-control" ng-model="trackNumber"/>

With "maxlength" set to 15, user cannot type 16th character in the box.

Similarly, when user types any special characters or white spaces, I would like to prevent "keypress" event. Currently, ng-pattern doesn't seem to stop user from typing invalid input.

How can do this?

Any help is greatly appreciated.

As far as I know, this is not the expected behavior of ng-pattern. As a suggestion, I don't think it's expected behavior from a user's perspective either, so it might be frustrating or surprising to them. For example, what happens when a user pastes an invalid value into the field? — Shawn Bush
– Shawn Bush, Commented Mar 10, 2015 at 22:46
Thank you. We agreed to go with ng-pattern behavior with form validations. — user3701057
– user3701057, Commented Mar 11, 2015 at 23:28

Community · Accepted Answer · 2017-05-23 12:32:23Z

21

@Shawn Bush is correct this is not the default behaviour of ng-pattern.

However please see my plunk I have created a directive called "regExInput" which takes a required attribute "regEx" and checks this against each key stroke returning false if the entry is invalid according to the regular expression.

The code for the directive:

app.directive("regExInput", function(){
"use strict";
return {
    restrict: "A",
    require: "?regEx",
    scope: {},
    replace: false,
    link: function(scope, element, attrs, ctrl){
      element.bind('keypress', function (event) {
        var regex = new RegExp(attrs.regEx);
        var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
        if (!regex.test(key)) {
           event.preventDefault();
           return false;
        }
      });
    }
};
});

I hope this helps. Do not hesitate to ask for any refinements to the code :)

Also I borrowed the jQuery code from Dale's answer found here

edited May 23, 2017 at 12:32

CommunityBot

11 silver badge

answered Mar 10, 2015 at 23:01

JDTLH9

1,7751 gold badge23 silver badges34 bronze badges

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

2 Comments

user3701057 Over a year ago

Thank you for the directive. We agreed to go with ng-pattern behavior with form validations.

A.W. Over a year ago

This actually works and you can use the ng-pattern attribute value as regexp input in the directive link.

Collectives™ on Stack Overflow

AngularJS - stop user from typing invalid input

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related