geico-design-kit 7.0.0

package/dist/components/ValidateForm.js

@@ -0,0 +1,938 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _baseComponent = _interopRequireDefault(require("../../src/baseComponent"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
+function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
+function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+//Require static assets
+
+//
+// PureJS Validation - Our component builds off the validation provided by validate.js
+//
+
+/*
+ * validate.js 1.4.1
+ * Copyright (c) 2011 - 2014 Rick Harrison, http://rickharrison.me
+ * validate.js is open sourced under the MIT license.
+ * Portions of validate.js are inspired by CodeIgniter.
+ * http://rickharrison.github.com/validate.js
+ */
+
+(function (window, document, undefined) {
+  /*
+   * If you would like an application-wide config, change these defaults.
+   * Otherwise, use the setMessage() function to configure form specific messages.
+   */
+
+  var defaults = {
+    messages: {
+      required: 'The %s field is required.',
+      matches: 'The %s field does not match the %s field.',
+      "default": 'The %s field is still set to default, please change.',
+      valid_email: 'The %s field must contain a valid email address.',
+      valid_emails: 'The %s field must contain all valid email addresses.',
+      min_length: 'The %s field must be at least %s characters in length.',
+      max_length: 'The %s field must not exceed %s characters in length.',
+      exact_length: 'The %s field must be exactly %s characters in length.',
+      greater_than: 'The %s field must contain a number greater than %s.',
+      less_than: 'The %s field must contain a number less than %s.',
+      alpha: 'The %s field must only contain alphabetical characters.',
+      alpha_numeric: 'The %s field must only contain alpha-numeric characters.',
+      alpha_dash: 'The %s field must only contain alpha-numeric characters, underscores, and dashes.',
+      numeric: 'The %s field must contain only numbers.',
+      integer: 'The %s field must contain an integer.',
+      decimal: 'The %s field must contain a decimal number.',
+      is_natural: 'The %s field must contain only positive numbers.',
+      is_natural_no_zero: 'The %s field must contain a number greater than zero.',
+      valid_ip: 'The %s field must contain a valid IP.',
+      valid_base64: 'The %s field must contain a base64 string.',
+      valid_credit_card: 'The %s field must contain a valid credit card number.',
+      is_file_type: 'The %s field must contain only %s files.',
+      valid_url: 'The %s field must contain a valid URL.'
+    },
+    callback: function callback(errors) {}
+  };
+
+  /*
+   * Define the regular expressions that will be used
+   */
+
+  var ruleRegex = /^(.+?)\[(.+)\]$/,
+    numericRegex = /^[0-9]+$/,
+    integerRegex = /^\-?[0-9]+$/,
+    decimalRegex = /^\-?[0-9]*\.?[0-9]+$/,
+    emailRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9]){1,})+$/,
+    alphaRegex = /^[a-z]+$/i,
+    alphaNumericRegex = /^[a-z0-9]+$/i,
+    alphaDashRegex = /^[a-z0-9_\-]+$/i,
+    naturalRegex = /^[0-9]+$/i,
+    naturalNoZeroRegex = /^[1-9][0-9]*$/i,
+    ipRegex = /^((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){3}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})$/i,
+    base64Regex = /[^a-zA-Z0-9\/\+=]/i,
+    numericDashRegex = /^[\d\-\s]+$/,
+    urlRegex = /^((http|https):\/\/(\w+:{0,1}\w*@)?(\S+)|)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?$/;
+
+  /*
+   * The exposed public object to validate a form:
+   *
+   * @param formNameOrNode - String - The name attribute of the form (i.e. <form name="myForm"></form>) or node of the form element
+   * @param fields - Array - [{
+   *     name: The name of the element (i.e. <input name="myField" />)
+   *     display: 'Field Name'
+   *     rules: required|matches[password_confirm]
+   * }]
+   * @param callback - Function - The callback after validation has been performed.
+   *     @argument errors - An array of validation errors
+   *     @argument event - The javascript event
+   */
+
+  var FormValidator = function FormValidator(formNameOrNode, fields, callback) {
+      this.callback = callback || defaults.callback;
+      this.errors = [];
+      this.fields = {};
+      this.form = this._formByNameOrNode(formNameOrNode) || {};
+      this.messages = {};
+      this.handlers = {};
+      this.conditionals = {};
+      for (var i = 0, fieldLength = fields.length; i < fieldLength; i++) {
+        var field = fields[i];
+
+        // If passed in incorrectly, we need to skip the field.
+        if (!field.name && !field.names || !field.rules) {
+          continue;
+        }
+
+        /*
+         * Build the master fields array that has all the information needed to validate
+         */
+
+        if (field.names) {
+          for (var j = 0, fieldNamesLength = field.names.length; j < fieldNamesLength; j++) {
+            this._addField(field, field.names[j]);
+          }
+        } else {
+          this._addField(field, field.name);
+        }
+      }
+
+      /*
+       * Attach an event callback for the form submission
+       */
+
+      var _onsubmit = this.form.onsubmit;
+      this.form.onsubmit = function (that) {
+        return function (evt) {
+          try {
+            return that._validateForm(evt) && (_onsubmit === undefined || _onsubmit());
+          } catch (e) {}
+        };
+      }(this);
+    },
+    attributeValue = function attributeValue(element, attributeName) {
+      if (element.length > 0 && (element[0].type === 'radio' || element[0].type === 'checkbox')) {
+        for (var i = 0; element.length > i; i++) {
+          if (element[i].checked) {
+            return element[i][attributeName];
+          }
+        }
+        return;
+      }
+      return element[attributeName];
+    };
+
+  /*
+   * @public
+   * Sets a custom message for one of the rules
+   */
+
+  FormValidator.prototype.setMessage = function (rule, message) {
+    this.messages[rule] = message;
+
+    // return this for chaining
+    return this;
+  };
+
+  /*
+   * @public
+   * Registers a callback for a custom rule (i.e. callback_username_check)
+   */
+
+  FormValidator.prototype.registerCallback = function (name, handler) {
+    if (name && typeof name === 'string' && handler && typeof handler === 'function') {
+      this.handlers[name] = handler;
+    }
+
+    // return this for chaining
+    return this;
+  };
+
+  /*
+   * @public
+   * Registers a conditional for a custom 'depends' rule
+   */
+
+  FormValidator.prototype.registerConditional = function (name, conditional) {
+    if (name && typeof name === 'string' && conditional && typeof conditional === 'function') {
+      this.conditionals[name] = conditional;
+    }
+
+    // return this for chaining
+    return this;
+  };
+
+  /*
+   * @private
+   * Determines if a form dom node was passed in or just a string representing the form name
+   */
+
+  FormValidator.prototype._formByNameOrNode = function (formNameOrNode) {
+    return _typeof(formNameOrNode) === 'object' ? formNameOrNode : document.forms[formNameOrNode];
+  };
+
+  /*
+   * @private
+   * Adds a file to the master fields array
+   */
+
+  FormValidator.prototype._addField = function (field, nameValue) {
+    this.fields[nameValue] = {
+      name: nameValue,
+      display: field.display || nameValue,
+      rules: field.rules,
+      depends: field.depends,
+      id: null,
+      element: null,
+      type: null,
+      value: null,
+      checked: null
+    };
+  };
+
+  /*
+   * @private
+   * Runs the validation when the form is submitted.
+   */
+
+  FormValidator.prototype._validateForm = function (evt) {
+    this.errors = [];
+    for (var key in this.fields) {
+      if (this.fields.hasOwnProperty(key)) {
+        var field = this.fields[key] || {};
+        var element = this.form.querySelectorAll('[name=' + field.name + ']'); //this.form[field.name];
+        if (element.length === 1) {
+          element = element[0];
+        }
+        if (element && element !== undefined) {
+          field.element = element;
+          field.type = element.length > 0 ? element[0].type : element.type;
+          field.id = attributeValue(element, 'id');
+          field.value = attributeValue(element, 'value');
+          field.checked = attributeValue(element, 'checked');
+
+          /*
+           * Run through the rules for each field.
+           * If the field has a depends conditional, only validate the field
+           * if it passes the custom function
+           */
+
+          if (field.depends && typeof field.depends === "function") {
+            if (field.depends.call(this, field)) {
+              this._validateField(field);
+            }
+          } else if (field.depends && typeof field.depends === "string" && this.conditionals[field.depends]) {
+            if (this.conditionals[field.depends].call(this, field)) {
+              this._validateField(field);
+            }
+          } else {
+            this._validateField(field);
+          }
+        }
+      }
+    }
+    if (typeof this.callback === 'function') {
+      this.callback(this.errors, evt);
+    }
+    if (this.errors.length > 0) {
+      if (evt && evt.preventDefault) {
+        evt.preventDefault();
+        return false;
+      } else if (event) {
+        // IE uses the global event variable
+        event.returnValue = false;
+      }
+    }
+    return true;
+  };
+
+  /*
+   * @private
+   * Looks at the fields value and evaluates it against the given rules
+   */
+
+  FormValidator.prototype._validateField = function (field) {
+    var rules = field.rules.split('|'),
+      indexOfRequired = field.rules.indexOf('required'),
+      isEmpty = !field.value || field.value === '' || field.value === undefined;
+
+    /*
+     * Run through the rules and execute the validation methods as needed
+     */
+
+    for (var i = 0, ruleLength = rules.length; i < ruleLength; i++) {
+      var method = rules[i],
+        param = null,
+        failed = false,
+        parts = ruleRegex.exec(method);
+
+      /*
+       * If this field is not required and the value is empty, continue on to the next rule unless it's a callback.
+       * This ensures that a callback will always be called but other rules will be skipped.
+       */
+
+      if (indexOfRequired === -1 && method.indexOf('!callback_') === -1 && isEmpty) {
+        continue;
+      }
+
+      /*
+       * If the rule has a parameter (i.e. matches[param]) split it out
+       */
+
+      if (parts) {
+        method = parts[1];
+        param = parts[2];
+      }
+      if (method.charAt(0) === '!') {
+        method = method.substring(1, method.length);
+      }
+
+      /*
+       * If the hook is defined, run it to find any validation errors
+       */
+
+      if (typeof this._hooks[method] === 'function') {
+        if (!this._hooks[method].apply(this, [field, param])) {
+          failed = true;
+        }
+      } else if (method.substring(0, 9) === 'callback_') {
+        // Custom method. Execute the handler if it was registered
+        method = method.substring(9, method.length);
+        if (typeof this.handlers[method] === 'function') {
+          if (this.handlers[method].apply(this, [field.value, param, field]) === false) {
+            failed = true;
+          }
+        }
+      }
+
+      /*
+       * If the hook failed, add a message to the errors array
+       */
+
+      if (failed) {
+        // Make sure we have a message for this rule
+        var source = this.messages[field.name + '.' + method] || this.messages[method] || defaults.messages[method],
+          message = 'An error has occurred with the ' + field.display + ' field.';
+        if (source) {
+          message = source.replace('%s', field.display);
+          if (param) {
+            message = message.replace('%s', this.fields[param] ? this.fields[param].display : param);
+          }
+        }
+        this.errors.push({
+          id: field.id,
+          element: field.element,
+          name: field.name,
+          message: message,
+          rule: method
+        });
+
+        // Break out so as to not spam with validation errors (i.e. required and valid_email)
+        break;
+      }
+    }
+  };
+
+  /*
+   * @private
+   * Object containing all of the validation hooks
+   */
+
+  FormValidator.prototype._hooks = {
+    required: function required(field) {
+      var value = field.value;
+      if (field.type === 'checkbox' || field.type === 'radio') {
+        return field.checked === true;
+      }
+      return value !== null && value !== '';
+    },
+    "default": function _default(field, defaultName) {
+      return field.value !== defaultName;
+    },
+    matches: function matches(field, matchName) {
+      var el = this.form[matchName];
+      if (el) {
+        return field.value === el.value;
+      }
+      return false;
+    },
+    valid_email: function valid_email(field) {
+      return emailRegex.test(field.value);
+    },
+    valid_emails: function valid_emails(field) {
+      var result = field.value.split(",");
+      for (var i = 0, resultLength = result.length; i < resultLength; i++) {
+        if (!emailRegex.test(result[i])) {
+          return false;
+        }
+      }
+      return true;
+    },
+    min_length: function min_length(field, length) {
+      if (!numericRegex.test(length)) {
+        return false;
+      }
+      return field.value.length >= parseInt(length, 10);
+    },
+    max_length: function max_length(field, length) {
+      if (!numericRegex.test(length)) {
+        return false;
+      }
+      return field.value.length <= parseInt(length, 10);
+    },
+    exact_length: function exact_length(field, length) {
+      if (!numericRegex.test(length)) {
+        return false;
+      }
+      return field.value.length === parseInt(length, 10);
+    },
+    greater_than: function greater_than(field, param) {
+      if (!decimalRegex.test(field.value)) {
+        return false;
+      }
+      return parseFloat(field.value) > parseFloat(param);
+    },
+    less_than: function less_than(field, param) {
+      if (!decimalRegex.test(field.value)) {
+        return false;
+      }
+      return parseFloat(field.value) < parseFloat(param);
+    },
+    alpha: function alpha(field) {
+      return alphaRegex.test(field.value);
+    },
+    alpha_numeric: function alpha_numeric(field) {
+      return alphaNumericRegex.test(field.value);
+    },
+    alpha_dash: function alpha_dash(field) {
+      return alphaDashRegex.test(field.value);
+    },
+    numeric: function numeric(field) {
+      return numericRegex.test(field.value);
+    },
+    integer: function integer(field) {
+      return integerRegex.test(field.value);
+    },
+    decimal: function decimal(field) {
+      return decimalRegex.test(field.value);
+    },
+    is_natural: function is_natural(field) {
+      return naturalRegex.test(field.value);
+    },
+    is_natural_no_zero: function is_natural_no_zero(field) {
+      return naturalNoZeroRegex.test(field.value);
+    },
+    valid_ip: function valid_ip(field) {
+      return ipRegex.test(field.value);
+    },
+    valid_base64: function valid_base64(field) {
+      return base64Regex.test(field.value);
+    },
+    valid_url: function valid_url(field) {
+      return urlRegex.test(field.value);
+    },
+    valid_credit_card: function valid_credit_card(field) {
+      // Luhn Check Code from https://gist.github.com/4075533
+      // accept only digits, dashes or spaces
+      if (!numericDashRegex.test(field.value)) return false;
+
+      // The Luhn Algorithm. It's so pretty.
+      var nCheck = 0,
+        nDigit = 0,
+        bEven = false;
+      var strippedField = field.value.replace(/\D/g, "");
+      for (var n = strippedField.length - 1; n >= 0; n--) {
+        var cDigit = strippedField.charAt(n);
+        nDigit = parseInt(cDigit, 10);
+        if (bEven) {
+          if ((nDigit *= 2) > 9) nDigit -= 9;
+        }
+        nCheck += nDigit;
+        bEven = !bEven;
+      }
+      return nCheck % 10 === 0;
+    },
+    is_file_type: function is_file_type(field, type) {
+      if (field.type !== 'file') {
+        return true;
+      }
+      var ext = field.value.substr(field.value.lastIndexOf('.') + 1),
+        typeArray = type.split(','),
+        inArray = false,
+        i = 0,
+        len = typeArray.length;
+      for (i; i < len; i++) {
+        if (ext === typeArray[i]) inArray = true;
+      }
+      return inArray;
+    }
+  };
+  window.FormValidator = FormValidator;
+})(window, document);
+var validateSettings = [{
+  setting: "content",
+  isRequired: true,
+  validate: "type",
+  possibleValues: ["string", "object"],
+  errorMessage: ["GDK ValidateForm : Content must be defined and set to a DOM selector or Node"]
+}];
+var ValidateForm = /*#__PURE__*/function () {
+  // 1. All input fields need error styling, if there is a server error on fields we are not directly validating
+  // 2. Numbers -- needs to be a number and if required
+  // 3. Email -- needs to be a email and if required
+  // 4. Phone Number -- needs match exact phone number pattern "(804) 341-3525"
+  // 5. SSN -- validate the hidden field needs match exact ssn pattern "123-12-4124"
+  // 6. Select Box -- if required
+  // 7. Checkbox -- if required
+  // 8. Radio Buttons -- if required
+  // 9. Text area -- if required
+
+  /**
+   * These are settings for the instantiation. Refer to the design kit section of this component for JS setting examples.
+   * @param {string|Object} options
+   *  A reference to the html form container
+   */
+  function ValidateForm(options) {
+    _classCallCheck(this, ValidateForm);
+    console.log("Initialized the ValidateForm component");
+    this._internalVars = {
+      node: null //used for content item
+    };
+
+    //options with defaults set
+    this._defaults = {};
+
+    // Create options by extending defaults with the passed in arguments
+    if (options && _typeof(options) === "object") {
+      this._options = _baseComponent["default"].extendDefaults(this._defaults, options);
+    }
+
+    // From the passed in CSS selector iterate over each form and build validation rules and events
+    this._forms = document.querySelectorAll(options.content);
+    this._validators = [];
+    this._rules = [];
+    for (var n = 0; this._forms.length > n; n++) {
+      // Initialize the form
+      initializeForm.call(this, n);
+    }
+
+    //if the required options are valid set up the environment
+    if (_baseComponent["default"].validateSettings(this._options, validateSettings)) {
+      this._internalVars.contentType = _baseComponent["default"].getContentType(this);
+      setLocalVars.call(this);
+      setEvents.call(this);
+    }
+  }
+
+  //Public Methods
+
+  /**
+   * removes the node from the dom and any events attached
+   */
+  return _createClass(ValidateForm, [{
+    key: "destroy",
+    value: function destroy() {
+      removeEvents.call(this);
+      this._internalVars.node.parentNode.removeChild(this._internalVars.node);
+
+      //a little garbage collection
+      for (var variableKey in this) {
+        if (this.hasOwnProperty(variableKey)) {
+          delete this[variableKey];
+        }
+      }
+    }
+  }]);
+}(); // Private Methods
+/**
+ * Initialize the form
+ */
+function initializeForm(n) {
+  return function (that, n) {
+    that._rules[n] = buildRules(that._forms[n]);
+    that._validators[n] = new FormValidator(that._forms[n],
+    // Built dynamically via data attributes
+    that._rules[n],
+    // Callback on each validation pass blur or submit
+    function (errors, evt) {
+      // Clear any old errors
+      var wrappers = this.form.querySelectorAll('[class=form-field]');
+      for (var j = 0; wrappers.length > j; j++) {
+        // clear all field errors and reset the error class on wrapper
+        clearFieldError(wrappers[j]);
+      }
+
+      // Handle displaying any errors in the form
+      if (errors.length > 0) {
+        // add error classes to appropriate elements
+        for (var i = 0; errors.length > i; i++) {
+          var element = this.form.querySelectorAll('[name=' + errors[i].name + ']')[0];
+
+          // get this field's wrapper
+          var field_wrapper = closest(element, "form-field");
+
+          // Create and append the error message
+          addFieldError(field_wrapper, errors[i].message);
+        }
+      }
+    });
+
+    // Extend validation class
+    extendValidator(that._validators[n]);
+  }(this, n);
+}
+function addBlur(validator, element) {
+  return function (that, element) {
+    return function (evt) {
+      var field = that.fields[element.getAttribute('name')] || {};
+      if (element && element !== undefined) {
+        field.element = element;
+        field.id = element.getAttribute('id');
+        field.name = element.getAttribute('name');
+        field.type = element.length > 0 ? element[0].type : element.type;
+        field.value = element.value;
+        field.checked = element.checked;
+
+        // clear any errors relating to this field
+        if (that.errors.length > 0) {
+          for (var i = 0; that.errors.length > i; i++) {
+            if (that.errors[i].name === field.name) {
+              // splice don't delete
+              that.errors.splice(i, 1);
+            }
+          }
+        }
+
+        // get this field's wrapper
+        var field_wrapper = closest(element, "form-field");
+
+        // clear all field errors and reset the error class on wrapper
+        clearFieldError(field_wrapper);
+
+        // validate this field
+        that.errors = [];
+        that._validateField(field);
+
+        // Handle displaying any errors in the form
+        if (that.errors.length > 0) {
+          // add error classes to appropriate elements
+          for (var j = 0; that.errors.length > j; j++) {
+            // get this field's wrapper
+            field_wrapper = closest(that.errors[j].element, "form-field");
+
+            // Create and append the error message
+            addFieldError(field_wrapper, that.errors[j].message);
+          }
+        }
+      }
+    };
+  }(validator, element);
+}
+
+/**
+ * setEvents()
+ * Sets all the events needed for the component
+ */
+function setEvents() {
+  // Go through each form's rulesets
+  for (var n = 0; this._rules.length > n; n++) {
+    // Go through each ruleset
+    for (var e = 0; this._rules[n].length > e; e++) {
+      // pull out the element
+      var element = this._rules[n][e].element;
+      if (element.type === 'checkbox' || element.type === 'radio') {
+        // Add an onchange event
+        element.onchange = addBlur(this._validators[n], element);
+      } else {
+        // Add an onblur event
+        element.onblur = addBlur(this._validators[n], element);
+      }
+    }
+  }
+}
+
+/**
+ * removeEvents()
+ * removes all events from the component
+ */
+function removeEvents() {}
+
+/**
+ * buildRules()
+ * builds an array of validation rules based on the DOM attributes
+ */
+function buildRules(form) {
+  form = _typeof(form) === 'object' ? form : document.forms[form];
+  var elements = form.querySelectorAll('[data-validate]');
+  var rules = [];
+  var unique_rules = [];
+  for (var i = 0; elements.length > i; i++) {
+    // set up a rule for this element
+    var rule = {
+      rules: elements[i].getAttribute("data-validate"),
+      element: elements[i],
+      name: elements[i].getAttribute("name")
+    };
+    if (!rule.name) {
+      console.log("Warning: Field element missing name attribute.", rule.element);
+    }
+
+    // Add rule to the list
+    rules.push(rule);
+  }
+  return rules;
+}
+
+/**
+ * Find the closest parent containing a class
+ */
+function closest(el, cls) {
+  while ((el = el.parentNode) && -1 === el.className.indexOf(cls));
+  return el;
+}
+
+/**
+ * Add an error message to an element
+ */
+function addFieldError(wrapper, error) {
+  // Make sure the wrapper has the error class
+  if (-1 === wrapper.className.indexOf("form-field--error")) {
+    wrapper.className = wrapper.className + " form-field--error";
+  }
+  if (wrapper.querySelector('input')) wrapper.querySelector('input').setAttribute("aria-invalid", "true");
+  if (wrapper.querySelector('textarea')) wrapper.querySelector('textarea').setAttribute("aria-invalid", "true");
+  if (wrapper.querySelector('select')) wrapper.querySelector('select').setAttribute("aria-invalid", "true");
+
+  // Get all spans and check ones bearing class "form-message"
+  var spans = wrapper.getElementsByTagName('span');
+  for (var e = 0; spans.length > e; e++) {
+    // Somewhat of a hack to do element content comparison when
+    // browsers render inner tags differently
+    var comparison_div = document.createElement("div");
+    comparison_div.innerHTML = error;
+
+    // If the discovered span is a message and contains the same text as the error var
+    if (-1 !== spans[e].className.indexOf("form-message") && spans[e].innerHTML === comparison_div.innerHTML) {
+      // Don't add the same message to a wrapper twice
+      return;
+    }
+  }
+
+  // Add an error to the element wrapper
+  var msg = document.createElement("span");
+  msg.id = "form-message-" + wrapper.querySelector('[data-validate]').id;
+  msg.innerHTML = error;
+  msg.className = "form-message";
+  var idString = "";
+  wrapper.appendChild(msg);
+  if (wrapper.querySelector('.form-descriptive-copy')) {
+    idString = wrapper.querySelector('.form-descriptive-copy').id + " " + msg.id;
+  } else {
+    idString = msg.id;
+  }
+  wrapper.querySelector('[data-validate]').setAttribute('aria-describedby', idString);
+}
+
+/**
+ * Remove field errors from an element
+ */
+function clearFieldError(wrapper) {
+  // remove error class from wrapper
+  if (-1 !== wrapper.className.indexOf("form-field--error")) {
+    wrapper.className = wrapper.className.replace("form-field--error", "");
+  }
+  if (wrapper.querySelector('input')) wrapper.querySelector('input').setAttribute("aria-invalid", "false");
+  if (wrapper.querySelector('textarea')) wrapper.querySelector('textarea').setAttribute("aria-invalid", "false");
+  if (wrapper.querySelector('select')) wrapper.querySelector('select').setAttribute("aria-invalid", "false");
+  // Get all spans and remove ones bearing class "form-message"
+  var spans = wrapper.getElementsByTagName('span');
+  for (var e = 0; spans.length > e; e++) {
+    if (-1 !== spans[e].className.indexOf("form-message")) {
+      spans[e].parentNode.removeChild(spans[e]);
+    }
+  }
+  wrapper.querySelector('[data-validate]').removeAttribute('aria-describedby');
+}
+
+/**
+ * Attach additional validator rules to validator objects
+ */
+function extendValidator(validator) {
+  // custom validators
+  validator.registerCallback('ssn', function (value, masked_ssn_id) {
+    // get the masked SSN
+    var masked_ssn = document.getElementById(masked_ssn_id);
+    // Test to see if the masked SSN is valid: '###-##-####'
+    // var ssn_regex = /^\d{3}-?\d{2}-?\d{4}$/;
+    var ssn_regex = /^(?!219-09-9999|078-05-1120)(?!666|000|9\d{2})\d{3}-(?!00)\d{2}-(?!0{4})\d{4}$/;
+    return ssn_regex.test(masked_ssn.value);
+  });
+  validator.registerCallback('phone', function (value) {
+    // Test to see if the Phone is valid: '(###) ###-####'
+    var phone_regex = /^([\(]{1}[0-9]{3}[\)]{1}[ ]?[0-9]{3}[\-]{1}[0-9]{4})$/;
+    return phone_regex.test(value);
+  });
+  validator.registerCallback('date', function (value) {
+    // Test to see if the Date is valid: '##/##/####'
+    var date_regex = /^((0[1-9])|(1[0-2]))[\/]((0[1-9])|([1,2][0-9])|(3[0,1]))[\/]((19|20)[0-9][0-9])$/;
+    if (date_regex.test(value)) {
+      var date_parts = value.split("/");
+      // check to see if the month is still the correct month after
+      // casting the date string to a date, This works because if a
+      // day is past the last day of the month the JS Date object
+      // advances the number of days past the month's end into the
+      // next month.
+      return new Date(date_parts[2], parseInt(date_parts[0]) - 1, date_parts[1]).getMonth() === parseInt(date_parts[0]) - 1;
+    }
+    return false;
+  });
+  validator.registerCallback('date_short', function (value) {
+    // Test to see if the Date is valid: '##/####'
+    var date_regex = /^((0[1-9])|(1[0-2]))[\/]((19|20)[0-9][0-9])$/;
+    return date_regex.test(value);
+  });
+
+  // set variables for regex
+  var today = new Date();
+  var currentYear = today.getFullYear();
+  currentYear = currentYear.toString();
+  var twoDigitYear = currentYear.slice(-2);
+  var lastYearDigit = twoDigitYear.slice(1);
+  var datePatternStart;
+  var dateCurrentYear;
+  var datePatternEnd;
+  if (twoDigitYear < 20) {
+    datePatternStart = '^((0[1-9])|(1[0-2]))[\\/](';
+    dateCurrentYear = '(1[' + lastYearDigit + '-9])|';
+    datePatternEnd = '([2-9][0-9]))$';
+  } else {
+    datePatternStart = '^((0[1-9])|(1[0-2]))[\\/](';
+    dateCurrentYear = '';
+    datePatternEnd = '([2-9][0-9]))$';
+  }
+  validator.registerCallback('date_short_year', function (value) {
+    // Test to see if the Date is valid: '##/##'
+    var date_regex = new RegExp(datePatternStart + dateCurrentYear + datePatternEnd);
+    return date_regex.test(value);
+  });
+  validator.registerCallback('radio_required', function (value, element_name) {
+    // See if there are any checked input elements matching the element name passed in
+    var radio = this.form.querySelectorAll('input[name="' + element_name + '"]:checked');
+    return radio.length > 0;
+  });
+  validator.registerCallback('checkbox_required', function (value, element_name) {
+    // See if there are any checked input elements matching the element name passed in
+    var cb = this.form.querySelectorAll('input[name="' + element_name + '"]:checked');
+    return cb.length > 0;
+  });
+  validator.registerCallback('select_required', function (value, select_id) {
+    // See if there are any selected option elements under the provided select
+    var select_element = document.getElementById(select_id);
+    if (select_element.options[select_element.selectedIndex] !== undefined) {
+      // overwrite the "value" passed into this validator
+      value = select_element.options[select_element.selectedIndex].value;
+      if (value !== undefined && value) {
+        return true;
+      }
+    }
+    return false;
+  });
+  validator.registerCallback('timeInput', function (value, masked_timeInput_id) {
+    // get the masked timeInput
+    var masked_timeInput = document.getElementById(masked_timeInput_id),
+      timeInput_regex = /^(0?[1-9]|1[012]):[0-5][0-9]$/,
+      timeInputValue = masked_timeInput.value,
+      initialHour,
+      minutes;
+    if (timeInputValue.length === 5) {
+      initialHour = timeInputValue.substring(2, 0);
+      minutes = timeInputValue.substring(3);
+      if (initialHour > 12 && initialHour < 24) {
+        initialHour = initialHour - 12;
+        setTime.call(this, masked_timeInput, initialHour, minutes);
+      }
+      if (initialHour < 1) {
+        initialHour = 12;
+        setTime.call(this, masked_timeInput, initialHour, minutes);
+      }
+    }
+    return timeInput_regex.test(masked_timeInput.value);
+  });
+  validator.registerCallback('validateZipCode', function (value) {
+    var zipCodePattern = /^\d{5}$/;
+    return zipCodePattern.test(value);
+  });
+  validator.registerCallback('validateZipPlus4', function (value) {
+    var zipCodePattern = /^\d{5}-\d{4}$/;
+    return value.match('_____-____') || zipCodePattern.test(value);
+  });
+  function setTime(masked_timeInput, initialHour, minutes) {
+    var numHour, newValue, hour;
+    numHour = String(initialHour);
+    if (numHour.length < 2) {
+      hour = '0' + numHour;
+    } else {
+      hour = numHour;
+    }
+    Number(hour);
+    Number(initialHour);
+    newValue = hour + ':' + minutes;
+    masked_timeInput.value = newValue;
+  }
+
+  // Custom validation messages
+  validator.setMessage('required', 'Invalid entry.<br> Please check your entry and try again.');
+  validator.setMessage('numeric', 'Invalid entry.<br> Please check your entry and try again.');
+  validator.setMessage('ssn', 'Please enter a valid Social Security Number.');
+  validator.setMessage('phone', 'Please enter a valid Phone Number.');
+  validator.setMessage('radio_required', 'Please make a selection.');
+  validator.setMessage('checkbox_required', 'Please make a selection.');
+  validator.setMessage('select_required', 'Please make a selection.');
+  validator.setMessage('valid_email', "Invalid email.<br> Please check your entry and try again.");
+  validator.setMessage('date', "Invalid date format.<br> Please check your entry and try again.");
+  validator.setMessage('date_short', "Invalid date format.<br> Please check your entry and try again.");
+  validator.setMessage('timeInput', 'Please enter a valid time of day.');
+  validator.setMessage('date_short_year', "Invalid date format.<br> Please check your entry and try again.");
+  validator.setMessage('validateZipCode', "Please enter a valid<br/>zip code.");
+  validator.setMessage('validateZipPlus4', "Please enter a valid<br/>zip code.");
+}
+
+/**
+ * setLocalVars()
+ * set all the local vars to passed in options
+ */
+function setLocalVars() {
+  //determine the type of content passed in
+  if (this._internalVars.contentType === 'string') {
+    this._internalVars.node = document.querySelector(this._options.content);
+  } else if (this._internalVars.contentType === 'domNode') {
+    this._internalVars.node = this._options.content;
+  }
+}
+var _default2 = exports["default"] = ValidateForm;