Join the social network of Tech Nerds, increase skill rank, get work, manage projects...

 1 Answer(s)

  • Hi Bhagwan

    Create html page and put below code. In which text field accept only basis of valid pattern.

    <body ng-app="CodePenApp">
      ALPHA ONLY <input type="text" allow-pattern="[a-z]" />
      NUMBER ONLY <input type="text" allow-pattern="\d" />
      ALPHANUMERIC ONLY <input type="text" allow-pattern="(\d|[a-z])" />
      WHITESPACE CHARACTERS ONLY <input type="text" allow-pattern="\W" />
      ABCDEFG ONLY <input type="text" allow-pattern="[ABCDEFG]" />

    Create controller for the above html code.

    var app = angular.module("CodePenApp",[]);
    app.directive('allowPattern', [allowPatternDirective]);
    function allowPatternDirective() {
        return {
            restrict: "A",
            compile: function(tElement, tAttrs) {
                return function(scope, element, attrs) {
            // I handle key events
                    element.bind("keypress", function(event) {
                        var keyCode = event.which || event.keyCode; // I safely get the keyCode pressed from the event.
                        var keyCodeChar = String.fromCharCode(keyCode); // I determine the char from the keyCode.
              // If the keyCode char does not match the allowed Regex Pattern, then don't allow the input into the field.
                        if (!keyCodeChar.match(new RegExp(attrs.allowPattern, "i"))) {
                            return false;
Sign In

Sign up using

Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: