Skip to content

Instantly share code, notes, and snippets.

@elizabeth-young
Created July 1, 2013 09:17
Show Gist options
  • Save elizabeth-young/5899484 to your computer and use it in GitHub Desktop.
Save elizabeth-young/5899484 to your computer and use it in GitHub Desktop.
Some Angular validation directives
'use strict';
var directives = angular.module('app', []);
// override the default input to update on blur
directives.directive('input', function () {
return {
restrict: 'E',
require: 'ngModel',
link: function (scope, elm, attr, ngModelCtrl) {
if (attr.type === 'radio' || attr.type === 'checkbox') return;
elm.unbind('input').unbind('keydown').unbind('change');
elm.bind('blur', function () {
scope.$apply(function () {
ngModelCtrl.$setViewValue(elm.val());
});
});
}
};
});
//put focus on element
directives.directive('focus', function() {
return {
link: function(scope, element, attrs) {
element[0].focus();
}
};
});
//validates a postcode
directives.directive('postcodeValidate', function () {
return {
restrict: 'A',
require: 'ngModel',
// scope = the parent scope
// elem = the element the directive is on
// attr = a dictionary of attributes on the element
// ctrl = the controller for ngModel.
link: function (scope, elem, attr, ctrl) {
// create the regex obj.
var regex = /(GIR\s0AA)|(gir\s0aa)|((([A-PR-UWYZa-pr-uwyz][0-9][0-9]?)|(([A-PR-UWYZa-pr-uwyz][A-HK-Ya-hk-y][0-9][0-9]?)|(([A-PR-UWYZa-pr-uwyz][0-9][A-HJKSTUWa-hjkstuw])|([A-PR-UWYZa-pr-uwyz][A-HK-Ya-hk-y][0-9][ABEHMNPRVWXYabehmnprvwxy]))))\s{0,1}[0-9][ABD-HJLNP-UW-Zabd-hjlnp-uw-z]{2})/;
// add a parser that will process each time the value is
// parsed into the model when the user updates it.
ctrl.$parsers.unshift(function (value) {
// test and set the validity after update.
var valid = regex.test(value);
ctrl.$setValidity('postcodeValidate', valid);
// if it's valid, return the value to the model,
// otherwise return undefined.
return valid ? value : undefined;
});
// add a formatter that will process each time the value
// is updated on the DOM element.
ctrl.$formatters.unshift(function (value) {
// validate.
ctrl.$setValidity('postcodeValidate', regex.test(value));
// return the value or nothing will be written to the DOM.
return value;
});
}
};
});
//validate that input is a number
directives.directive('numberValidate', function () {
return {
restrict: 'A',
require: 'ngModel',
// scope = the parent scope
// elem = the element the directive is on
// attr = a dictionary of attributes on the element
// ctrl = the controller for ngModel.
link: function (scope, elem, attr, ctrl) {
var reqAttr = $(elem).attr("required");
var required = typeof reqAttr !== 'undefined' && reqAttr !== false;
// add a parser that will process each time the value is
// parsed into the model when the user updates it.
ctrl.$parsers.unshift(function (value) {
// test and set the validity after update.
var valid = true;
if (required) {
valid = !isNaN(parseFloat(value)) && isFinite(value);
} else {
valid = value !== "" && !isNaN(parseFloat(value)) && isFinite(value);
}
ctrl.$setValidity('numberValidate', valid);
// if it's valid, return the value to the model,
// otherwise return undefined.
return valid ? value : undefined;
});
// add a formatter that will process each time the value
// is updated on the DOM element.
ctrl.$formatters.unshift(function (value) {
// validate.
var valid = true;
if (!required && value === "") {
valid = true;
} else {
valid = !isNaN(parseFloat(value)) && isFinite(value);
}
ctrl.$setValidity('numberValidate', valid);
// return the value or nothing will be written to the DOM.
return value;
});
}
};
});
//validates input against a regex
directives.directive('regexValidate', function () {
return {
restrict: 'A',
require: 'ngModel',
// scope = the parent scope
// elem = the element the directive is on
// attr = a dictionary of attributes on the element
// ctrl = the controller for ngModel.
link: function (scope, elem, attr, ctrl) {
//get the regex flags from the regex-validate-flags="" attribute (optional)
var flags = attr.regexValidateFlags || '';
// create the regex obj.
var regex = new RegExp(attr.regexValidate, flags);
// add a parser that will process each time the value is
// parsed into the model when the user updates it.
ctrl.$parsers.unshift(function (value) {
// test and set the validity after update.
var valid = regex.test(value);
ctrl.$setValidity('regexValidate', valid);
// if it's valid, return the value to the model,
// otherwise return undefined.
return valid ? value : undefined;
});
// add a formatter that will process each time the value
// is updated on the DOM element.
ctrl.$formatters.unshift(function (value) {
// validate.
ctrl.$setValidity('regexValidate', regex.test(value));
// return the value or nothing will be written to the DOM.
return value;
});
}
};
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment