AngularJS – Validate Field As – Directive

posted in: AngularJS, Directive, ITE's Way | 1

Description

A directive to validate a field quickly

Preview Image

screen-shot-2016-09-15-at-2-09-07-pm

Validation Options

  • Required
  • Email
  • Number – 0.00
  • Date – yyyy-mm-dd
  • Time – hh:mm

HTML


   
      
        
          
            
          
        
    

Javascript

.directive('validateAs', function () {

            var link = function (scope, element, attrs, ngModel) {

				var validateAsTypes = attrs.validateAs.split('|');

				function customValidator(ngModelValue) {

					/**
					 * ITE Required Validator
					 */
					if (validateAsTypes.indexOf('required') > -1) {
						if (ngModelValue.length !== 0) {
							ngModel.$setValidity('requiredCheck', true);
						} else {
							ngModel.$setValidity('requiredCheck', false);
						}
					}

					/**
					 * ITE Email Validator
					 */
					if (validateAsTypes.indexOf('email') > -1) {
						//console.log(ngModel.$modelValue, ':: validating as email');

						var expression = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;

						if (expression.test(ngModelValue)) {
							ngModel.$setValidity('validEmailAddress', true);
						} else {
							ngModel.$setValidity('validEmailAddress', false);
						}
					}

					/**
					 * ITE Number Validator
					 *
					 * To two decimal 0.00
					 */
					if (validateAsTypes.indexOf('number') > -1) {

						var expression = /^[+]?\d+(\.\d{1,2})?$/;

						if (ngModelValue !== '' && ngModelValue !== null) {
							ngModelValue = ( expression.test(ngModelValue) ) ? ngModelValue : null;

							// If minimum attribute is specified, validate for minimum value
							if (scope.min) {
								if (!isNaN(scope.min)) {
									if (ngModelValue > scope.min) {
										ngModel.$setValidity('validNumber', !!ngModelValue);
									} else {
										ngModel.$setValidity('validNumber', false);
									}
								}
							} else {
								ngModel.$setValidity('validNumber', !!ngModelValue);
							}
						}
						else {
							ngModelValue = null;
							ngModel.$setValidity('validNumber', true);
						}
					}

					/**
					 * ITE Date Validator
					 *
					 * yyyy-mm-dd
					 */
					if (validateAsTypes.indexOf('date') > -1) {

						var expression = /^[0-9]{4}-(((0[13578]|(10|12))-(0[1-9]|[1-2][0-9]|3[0-1]))|(02-(0[1-9]|[1-2][0-9]))|((0[469]|11)-(0[1-9]|[1-2][0-9]|30)))$/;

						if (ngModelValue !== '' && ngModelValue !== null) {
							ngModelValue = expression.test( ngModelValue ) ? ngModelValue : null;
							ngModel.$setValidity('validDate', !!ngModelValue);
						} else {
							ngModelValue = null;
							ngModel.$setValidity('validDate', true);

						}
					}

					/**
					 * ITE Time Validator
					 *
					 * hh:mm = 12:34
					 */
					if (validateAsTypes.indexOf('time') > -1) {

						var expression = /^([0-9]|0[0-9]|1?[0-9]|2[0-3]):[0-5]?[0-9]$/;

						if (ngModelValue !== '' && ngModelValue !== null) {
							ngModelValue = ( expression.test( ngModelValue ) ) ? ngModelValue : null;
							ngModel.$setValidity('validTime', !!ngModelValue);
						} else {
							ngModelValue = null;
							ngModel.$setValidity('validTime', true);
						}
					}

					return ngModelValue;
				}

				ngModel.$parsers.push(customValidator);

            };

            return {
                restrict: 'A',
                require: 'ngModel',
                link: link
            };

		});

One Response

  1. This seems like something we need in our library!! Thanks JP! Also good example of how to document it and have it searchable to the team and the world as far as I know…

Leave a Reply