angular.module('app', ['ngMessages']); angular.module('app').directive('strongSecret', function () { return { restrict: 'A', require: 'ngModel', link: function (scope, element, attr, ctrl) { function customValidator(ngModelValue) { if (/[A-Z]/.test(ngModelValue)) { ctrl.$setValidity('uppercaseValidator', true); } else { ctrl.$setValidity('uppercaseValidator', false); } if (/[0-9]/.test(ngModelValue)) { ctrl.$setValidity('numberValidator', true); } else { ctrl.$setValidity('numberValidator', false); } if (ngModelValue.length === 6) { ctrl.$setValidity('sixCharactersValidator', true); } else { ctrl.$setValidity('sixCharactersValidator', false); } return ngModelValue; } ctrl.$parsers.push(customValidator); } }; });
<form name="sampleForm"> <input name="strongSecret" type="text" ng-model="strongSecret" strong-secret required placeholder="Please provide stron secret"> <ul class="error-msgs" ng-messages="sampleForm.strongSecret.$error"> <li ng-message="numberValidator">Strong secret has to contain at least 1 number</li> <li ng-message="uppercaseValidator">Strong secret has to contain at least 1 uppercase</li> <li ng-message="sixCharactersValidator">Strong secret has to exactly 6 characters long</li> </ul> </form>
* { padding: 0px; margin: 0px; font-size: 12px; } input { width: 90%; margin: 0 auto; padding: 5px; margin: 5px; } .error-msgs li { padding: 5px; color: red; }