JSFiddle - React, Tailwind, and code Playground

by rodhartzell

HTML

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<div id="ng-app" ng-app="securityApp" class="row-fluid ng-app:securityApp">
        <form ng-controller="changePasswordController" name="securityForm">
        
            <div class="input-help">
                <h4>Passwords must:</h4>
                <ul>
                    <li ng-class="pwdHasCapLetter">Contain at least one uppercase letter</li>
                </ul>
            </div>
            
            <input ng-model="newPassword" name="newPassword" password-validate  />
    </form>
</div>

CSS

/* Style input help requirement bullets */
    .input-help ul {
        list-style:none;
    }

/* Default each bullet to be invalid with a red cross and text */
    .input-help li {
        padding-left: 22px;
        line-height: 24px;
    }

/* Set to green check and text when valid */
    .input-help li.valid {
        display: none;
    }

JavaScript

var app = angular.module('securityApp', []);

app.controller('changePasswordController', function ($scope, $http) {
});


app.directive('passwordValidate', function () {
    return {
        require: 'ngModel',
        link: function (scope, elm, attrs, ctrl) {
            ctrl.$parsers.unshift(function (viewValue) {
                scope.pwdHasCapLetter = (viewValue && /[A-Z]/.test(viewValue)) ? 'valid' : undefined;
                
                
                if (scope.pwdHasCapLetter) {
                    ctrl.$setValidity('pwd', true);
                    return viewValue;
                } else {
                    ctrl.$setValidity('pwd', false);
                    return undefined;
                }

            });
        }
    };
});