Everlive Validation

el-validate.js

define(['lodash'], function (_) {
    'use strict';

    var defaultValidators = {
        $required: {
            name: '$required',
            attribute: 'ng-required',
            cleanName: 'required',
            validate: function (value) {
                return !!value;
            }
        },
        $pattern: {
            name: '$pattern',
            attribute: 'ng-pattern',
            cleanName: 'pattern',
            validate: function (value, checkValue) {
                return new RegExp(checkValue).test(value);
            }
        }};

    return ['$compile', '$rootScope', 'digestProxy', 'safeApply', '$timeout', function($compile, $rootScope, digestProxy, safeApply, $timeout) {
        return {
            restrict: 'A',
            link: function(scope, element, attrs) {
                var errorMessages = scope.$eval(attrs.elValidatorErrorMessages);
                var validations = scope.$eval(attrs.elValidate);
                var triggers = attrs.elValidateOn ? attrs.elValidateOn.split(';') : [];
                var errors = [];
                var ngModel = element.controller('ngModel');
                var form = element.inheritedData('$formController');
                var formItem = form[attrs.name] || (form[attrs.name] = {});
                formItem.$errorMessage =  '';
                formItem.elValidate = elValidate;

                function processDefaultValidators () {
                    _.each(defaultValidators, function (validator) {
                       if (validations.hasOwnProperty(validator.name)) {
                           attrs.$set(validator.attribute, validations[validator.name]);
                       }
                    });
                }

                function compileElements () {
                    element.after('<span class="required-star">*</span>');

                    var formItemPath = form.$name + '.' + attrs.name;
                    var errorContainer = angular.element('<div class="error" ng-show="' + formItemPath + '.$error" ng-bind="' + formItemPath + '.$errorMessage"></div>');
                    var compiled = $compile(angular.element(errorContainer))(scope);
                    element.after(compiled);
                }

                function setError (validationName, errorMessage) {
                    formItem.$errorMessage = errorMessage;
                    element.addClass('error');
                    ngModel.$setValidity(validationName, false);
                    errors.push(validationName);
                }

                function clearErrors () {
                    formItem.$errorMessage = '';
                    element.removeClass('error');
                    _.each(errors, function (error) {
                        ngModel.$setValidity(error, true);
                    });

                    errors = [];
                }

                function elValidate (options) {
                    options = options || {};
                    if (!formItem.$dirty && !options.force) {
                        return;
                    }

                    clearErrors();
                    var errorSet = false;
                    var modelValue = scope.$eval(attrs.ngModel);

                    _.each(validations, function (validation, validationName) {
                        if (errorSet) {
                            return;
                        }

                        if (defaultValidators[validationName]) {
                            var defaultValidator = defaultValidators[validationName];
                            var directiveValue = attrs[validationName];
                            var validationResult = defaultValidator.validate(modelValue, directiveValue);
                            if (!validationResult) {
                                setError(defaultValidator.cleanName, errorMessages[defaultValidator.name]);
                                errorSet = true;
                            }
                        } else if (!validation) {
                            setError(validationName, errorMessages[validationName]);
                            errorSet = true;
                        }
                    });
                }

                scope.$watch(function() {
                    return scope.$eval(attrs.elValidate);
                }, function (value) {
                    validations = value;
                }, true);

                scope.$watch(function () {
                    return scope.$eval(attrs.elValidateMessages);
                }, function (value) {
                    errorMessages = value;
                }, true);

                _.each(triggers, function (trigger) {
                    scope.$watch(trigger, function (value) {
                        if (value !== undefined) {
                            elValidate();
                        }
                    });
                });

                element.blur(digestProxy(function() {
                    if(!element.hasClass('ng-dirty')) {
                        element.addClass('ng-dirty');
                        element.removeClass('ng-pristine');
                        ngModel.$dirty = true;
                        form.$setDirty();
                    }

                    elValidate();
                }, scope));

                compileElements();
                processDefaultValidators();
            }
        };
    }];
});

<div class="details__item mb20">
            <div class="details__item__label fw100">Repeat password:</div>
            <input type="password"
                   name="repeatPassword"
                   ng-trim="false"

                   el-validate="{ '$required': true, 'passmatch': item.PasswordRepeat == item.Password}"
                   el-validate-messages=" { '$required': 'This field is required. Retype the input from the password field', 'passmatch': 'The value does not match the password field input' } "
                   el-validate-on="item.Password"

                   ng-model="item.PasswordRepeat"/>
        </div>