Angularjs-01-Phone-number-validation

Angularjs phone number validation using ng-patterm

by Shishir Morshed

HTML

<body ng-app='myApp' ng-controller="newUser">
    <form name="newUserForm" action="" method="post" ng-submit="userFormSubmit(newUserForm)" novalidate>
        <ul>
            <li>
                <label for="text">Phone</label>
                <input type="text" ng-model="phone" name="phone" id="phone" ng-pattern="/^[0]{1}[1]{1}[1-9]{1}[-]{1}[0-9]{8}$/" required>	<em ng-show="newUserForm.phone.$pristine"><msg>Valid pattern 016-12345678</msg></em>
	<em ng-show="newUserForm.phone.$invalid-pattern && !newUserForm.phone.$pristine">Invalid Pattern. Please Try 016-12345678</em>
	<em ng-show="newUserForm.phone.$valid"><valid>valid</valid></em>

            </li>
            <li>
                <button>Submit</button>
            </li>
        </ul>
    </form>
</body>

CSS

ul li {
    list-style: none;
    line-height: 40px;
}
ul li label {
    width: 100px;
    display: inline-block;
    font-weight: bold;
}
ul li input {
    border:1px solid #ccc;
    height: 30px;
    padding-left: 10px;
    width: 200px;
}
ul li em {
    color: #A9011C;
    margin-left: 10px;
}
ul li em msg {
    color: #aaa;
}
ul li em valid {
    color: #00790F
}
ul li input.ng-dirty.ng-invalid {
    border-color: #A9011C
}
ul li input.ng-dirty.ng-valid {
    border-color: #00790F
}

JavaScript

var app = angular.module("myApp", []);


app.controller('newUser', ['$scope', function ($scope) {
    $scope.userFormSubmit = function (form) {

        if (!form.$valid) {
            if (!form.phone.$valid) {
                form.phone.$pristine = false;
                document.getElementById(form.phone.$name).focus();
            }
        } else {
            alert(form.$valid);
        }
        return false;
    };

}]);