Created
July 1, 2013 09:17
-
-
Save elizabeth-young/5899484 to your computer and use it in GitHub Desktop.
Some Angular validation directives
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
'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