Post
Ask Question

AngularJS User Validation with Bootstrap Decorations

HTML code
  1. var app = angular.module('myapp', ['UserValidation']);  
  2.   
  3. myappCtrl = function($scope) {  
  4.     $scope.formAllGood = function () {  
  5.         return ($scope.usernameGood && $scope.passwordGood && $scope.passwordCGood)  
  6.     }  
  7.           
  8. }  
  9.   
  10. angular.module('UserValidation', []).directive('validUsername', function () {  
  11.     return {  
  12.         require: 'ngModel',  
  13.         link: function (scope, elm, attrs, ctrl) {  
  14.             ctrl.$parsers.unshift(function (viewValue) {  
  15.                 // Any way to read the results of a "required" angular validator here?  
  16.                 var isBlank = viewValue === ''  
  17.                 var invalidChars = !isBlank && !/^[A-z0-9]+$/.test(viewValue)  
  18.                 var invalidLen = !isBlank && !invalidChars && (viewValue.length < 5 || viewValue.length > 20)  
  19.                 ctrl.$setValidity('isBlank', !isBlank)  
  20.                 ctrl.$setValidity('invalidChars', !invalidChars)  
  21.                 ctrl.$setValidity('invalidLen', !invalidLen)  
  22.                 scope.usernameGood = !isBlank && !invalidChars && !invalidLen  
  23.   
  24.             })  
  25.         }  
  26.     }  
  27. }).directive('validPassword', function () {  
  28.     return {  
  29.         require: 'ngModel',  
  30.         link: function (scope, elm, attrs, ctrl) {  
  31.             ctrl.$parsers.unshift(function (viewValue) {  
  32.                 var isBlank = viewValue === ''  
  33.                 var invalidLen = !isBlank && (viewValue.length < 8 || viewValue.length > 20)  
  34.                 var isWeak = !isBlank && !invalidLen && !/(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z])/.test(viewValue)  
  35.                 ctrl.$setValidity('isBlank', !isBlank)  
  36.                 ctrl.$setValidity('isWeak', !isWeak)  
  37.                 ctrl.$setValidity('invalidLen', !invalidLen)  
  38.                 scope.passwordGood = !isBlank && !isWeak && !invalidLen  
  39.   
  40.             })  
  41.         }  
  42.     }  
  43. }).directive('validPasswordC', function () {  
  44.     return {  
  45.         require: 'ngModel',  
  46.         link: function (scope, elm, attrs, ctrl) {  
  47.             ctrl.$parsers.unshift(function (viewValue, $scope) {  
  48.                 var isBlank = viewValue === ''  
  49.                 var noMatch = viewValue != scope.myform.password.$viewValue  
  50.                 ctrl.$setValidity('isBlank', !isBlank)  
  51.                 ctrl.$setValidity('noMatch', !noMatch)  
  52.                 scope.passwordCGood = !isBlank && !noMatch  
  53.             })  
  54.         }  
  55.     }  
  56. })  
JAVASCRIPT Code
  1. var app = angular.module('myapp', ['UserValidation']);  
  2.   
  3. myappCtrl = function($scope) {  
  4.     $scope.formAllGood = function () {  
  5.         return ($scope.usernameGood && $scope.passwordGood && $scope.passwordCGood)  
  6.     }  
  7.           
  8. }  
  9.   
  10. angular.module('UserValidation', []).directive('validUsername', function () {  
  11.     return {  
  12.         require: 'ngModel',  
  13.         link: function (scope, elm, attrs, ctrl) {  
  14.             ctrl.$parsers.unshift(function (viewValue) {  
  15.                 // Any way to read the results of a "required" angular validator here?  
  16.                 var isBlank = viewValue === ''  
  17.                 var invalidChars = !isBlank && !/^[A-z0-9]+$/.test(viewValue)  
  18.                 var invalidLen = !isBlank && !invalidChars && (viewValue.length < 5 || viewValue.length > 20)  
  19.                 ctrl.$setValidity('isBlank', !isBlank)  
  20.                 ctrl.$setValidity('invalidChars', !invalidChars)  
  21.                 ctrl.$setValidity('invalidLen', !invalidLen)  
  22.                 scope.usernameGood = !isBlank && !invalidChars && !invalidLen  
  23.   
  24.             })  
  25.         }  
  26.     }  
  27. }).directive('validPassword', function () {  
  28.     return {  
  29.         require: 'ngModel',  
  30.         link: function (scope, elm, attrs, ctrl) {  
  31.             ctrl.$parsers.unshift(function (viewValue) {  
  32.                 var isBlank = viewValue === ''  
  33.                 var invalidLen = !isBlank && (viewValue.length < 8 || viewValue.length > 20)  
  34.                 var isWeak = !isBlank && !invalidLen && !/(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z])/.test(viewValue)  
  35.                 ctrl.$setValidity('isBlank', !isBlank)  
  36.                 ctrl.$setValidity('isWeak', !isWeak)  
  37.                 ctrl.$setValidity('invalidLen', !invalidLen)  
  38.                 scope.passwordGood = !isBlank && !isWeak && !invalidLen  
  39.   
  40.             })  
  41.         }  
  42.     }  
  43. }).directive('validPasswordC', function () {  
  44.     return {  
  45.         require: 'ngModel',  
  46.         link: function (scope, elm, attrs, ctrl) {  
  47.             ctrl.$parsers.unshift(function (viewValue, $scope) {  
  48.                 var isBlank = viewValue === ''  
  49.                 var noMatch = viewValue != scope.myform.password.$viewValue  
  50.                 ctrl.$setValidity('isBlank', !isBlank)  
  51.                 ctrl.$setValidity('noMatch', !noMatch)  
  52.                 scope.passwordCGood = !isBlank && !noMatch  
  53.             })  
  54.         }  
  55.     }  
  56. })  
Output File
 
If you write the wrong detail then it will give the error which are display in the Image.