AngularJS – Validate Field As – Directive

Description

A directive to validate a field quickly

Preview Image

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
            };

		});