JSFiddle - React, Tailwind, and code Playground

by Cory Dorning

HTML

<script src="https://code.angularjs.org/1.4.7/angular.js"></script>
<div ng-app="example">
    <h1>Validate Directive</h1>

    <p>The Validate directive allow us to restrict the characters an input can accept.</p>

    <h3><code>alphabetical</code> <span style="color: green">(works)</span></h3>
    <p>Restricts input to alphabetical (A-Z, a-z) characters only.</p>
    <label><input type="text" validate="alphabetical" ng-model="validate.alphabetical"/></label>

    <h3><code>alphanumeric</code> <span style="color: green">(works)</span></h3>
    <p>Restricts input to alphanumeric (A-Z, a-z, 0-9) characters only.</p>
    <label><input type="text" validate="alphanumeric" ng-model="validate.alphanumeric" /></label>

    <h3><code>currency</code> <span style="color: red">(doesn't work)</span></h3>
    <p>Restricts input to US currency characters with comma for thousand separator (optional) and cents (optional).</p>
    <label><input type="text" validate="currency.us" ng-model="validate.currency" /></label>

    <h3><code>date</code> <span style="color: red">(doesn't work)</span></h3>
    <p>Restricts input to the mm/dd/yyyy date format only.</p>
    <label><input type="text" validate="date" ng-model="validate.date" /></label>

    <h3><code>email</code> <span style="color: red">(doesn't work)</span></h3>
    <p>Restricts input to email format only.</p>
    <label><input type="text" validate="email" ng-model="validate.email" /></label>

    <h3><code>numeric</code> <span style="color: green">(works)</span></h3>
    <p>Restricts input to numeric (0-9) characters only.</p>
    <label><input type="text" validate="numeric" ng-model="validate.numeric" /></label>
    
</div>

JavaScript

angular.module('example', [])
  .directive('validate', function () {
    var validations = {
          // works
          alphabetical: /[^a-zA-Z]*$/,
          
          // works
          alphanumeric: /[^a-zA-Z0-9]*$/,
          
          // doesn't work - need to negate?
          // taken from: http://stackoverflow.com/questions/354044/what-is-the-best-u-s-currency-regex
          currency: /^[+-]?[0-9]{1,3}(?:,?[0-9]{3})*(?:\.[0-9]{2})?$/,
          
          // doesn't work - need to negate?
          // taken from here: http://stackoverflow.com/questions/15196451/regular-expression-to-validate-datetime-format-mm-dd-yyyy
          date: /(?:0[1-9]|1[0-2])\/(?:0[1-9]|[12][0-9]|3[01])\/(?:19|20)[0-9]{2}/,
          
          // doesn't work - need to negate?
          // taken from: http://stackoverflow.com/questions/46155/validate-email-address-in-javascript
          email: /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i,
          
          // works
          numeric: /[^0-9]*$/
        }
    ;

    return {
      require: 'ngModel',

      scope: {
        validate: '@'
      },

      link: function (scope, element, attrs, modelCtrl) {
        var pattern = validations[scope.validate] || scope.validate
        ;

        modelCtrl.$parsers.push(function (inputValue) {
          var transformedInput = inputValue.replace(pattern, '')
          ;
          
          if (transformedInput != inputValue) {
            modelCtrl.$setViewValue(transformedInput);
            modelCtrl.$render();
          }

          return transformedInput;
        });
      }
    };
  });