geico-design-kit 7.0.0

package/src/components/ValidateForm.js

@@ -0,0 +1,1030 @@
+//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.
+     */
+  
+    const 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(errors) {
+  
+      }
+    };
+  
+    /*
+     * Define the regular expressions that will be used
+     */
+  
+    const 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
+     */
+  
+    let FormValidator = function(formNameOrNode, fields, callback) {
+        this.callback = callback || defaults.callback;
+        this.errors = [];
+        this.fields = {};
+        this.form = this._formByNameOrNode(formNameOrNode) || {};
+        this.messages = {};
+        this.handlers = {};
+        this.conditionals = {};
+  
+        for (let i = 0, fieldLength = fields.length; i < fieldLength; i++) {
+          let 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 (let 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
+         */
+  
+        let _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 (element, attributeName) {
+  
+        if ((element.length > 0) && (element[0].type === 'radio' || element[0].type === 'checkbox')) {
+          for (let 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 (let key in this.fields) {
+  
+        if (this.fields.hasOwnProperty(key)) {
+          let field = this.fields[key] || {};
+          let 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) {
+      const 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 (let i = 0, ruleLength = rules.length; i < ruleLength; i++) {
+        let 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
+          let 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(field) {
+        let value = field.value;
+  
+        if ((field.type === 'checkbox') || (field.type === 'radio')) {
+          return (field.checked === true);
+        }
+  
+        return (value !== null && value !== '');
+      },
+  
+      "default": function(field, defaultName){
+        return field.value !== defaultName;
+      },
+  
+      matches: function(field, matchName) {
+        let el = this.form[matchName];
+  
+        if (el) {
+          return field.value === el.value;
+        }
+  
+        return false;
+      },
+  
+      valid_email: function(field) {
+        return emailRegex.test(field.value);
+      },
+  
+      valid_emails: function(field) {
+        let result = field.value.split(",");
+  
+        for (let i = 0, resultLength = result.length; i < resultLength; i++) {
+          if (!emailRegex.test(result[i])) {
+            return false;
+          }
+        }
+  
+        return true;
+      },
+  
+      min_length: function(field, length) {
+        if (!numericRegex.test(length)) {
+          return false;
+        }
+  
+        return (field.value.length >= parseInt(length, 10));
+      },
+  
+      max_length: function(field, length) {
+        if (!numericRegex.test(length)) {
+          return false;
+        }
+  
+        return (field.value.length <= parseInt(length, 10));
+      },
+  
+      exact_length: function(field, length) {
+        if (!numericRegex.test(length)) {
+          return false;
+        }
+  
+        return (field.value.length === parseInt(length, 10));
+      },
+  
+      greater_than: function(field, param) {
+        if (!decimalRegex.test(field.value)) {
+          return false;
+        }
+  
+        return (parseFloat(field.value) > parseFloat(param));
+      },
+  
+      less_than: function(field, param) {
+        if (!decimalRegex.test(field.value)) {
+          return false;
+        }
+  
+        return (parseFloat(field.value) < parseFloat(param));
+      },
+  
+      alpha: function(field) {
+        return (alphaRegex.test(field.value));
+      },
+  
+      alpha_numeric: function(field) {
+        return (alphaNumericRegex.test(field.value));
+      },
+  
+      alpha_dash: function(field) {
+        return (alphaDashRegex.test(field.value));
+      },
+  
+      numeric: function(field) {
+        return (numericRegex.test(field.value));
+      },
+  
+      integer: function(field) {
+        return (integerRegex.test(field.value));
+      },
+  
+      decimal: function(field) {
+        return (decimalRegex.test(field.value));
+      },
+  
+      is_natural: function(field) {
+        return (naturalRegex.test(field.value));
+      },
+  
+      is_natural_no_zero: function(field) {
+        return (naturalNoZeroRegex.test(field.value));
+      },
+  
+      valid_ip: function(field) {
+        return (ipRegex.test(field.value));
+      },
+  
+      valid_base64: function(field) {
+        return (base64Regex.test(field.value));
+      },
+  
+      valid_url: function(field) {
+        return (urlRegex.test(field.value));
+      },
+  
+      valid_credit_card: function(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.
+        let nCheck = 0, nDigit = 0, bEven = false;
+        let strippedField = field.value.replace(/\D/g, "");
+  
+        for (let n = strippedField.length - 1; n >= 0; n--) {
+          let 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(field,type) {
+        if (field.type !== 'file') {
+          return true;
+        }
+  
+        let 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);
+  
+  import baseComponent from '../../src/baseComponent';
+  
+  const 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"]
+    }
+  ];
+  
+  class ValidateForm{
+  
+    // 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
+     */
+    constructor(options) {
+      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.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(let 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.validateSettings(this._options, validateSettings) ){
+        this._internalVars.contentType = baseComponent.getContentType(this);
+        setLocalVars.call(this);
+        setEvents.call(this);
+      }
+    }
+  
+    //Public Methods
+  
+    /**
+     * removes the node from the dom and any events attached
+     */
+    destroy(){
+      removeEvents.call(this);
+      this._internalVars.node.parentNode.removeChild(this._internalVars.node);
+  
+      //a little garbage collection
+      for (let 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
+          let wrappers = this.form.querySelectorAll('[class=form-field]');
+          for(let 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(let i = 0; errors.length > i; i++) {
+              let element = this.form.querySelectorAll('[name=' + errors[i].name + ']')[0];
+  
+              // get this field's wrapper
+              let 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) {
+        let 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(let 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
+          let 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(let 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(let n = 0; this._rules.length > n; n++) {
+      // Go through each ruleset
+      for(let e = 0; this._rules[n].length > e; e++) {
+        // pull out the element
+        let 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];
+    let elements = form.querySelectorAll('[data-validate]');
+    let rules = [];
+    let unique_rules = [];
+  
+    for(let i = 0; elements.length > i; i++) {
+      // set up a rule for this element
+      let 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"
+    const spans = wrapper.getElementsByTagName('span');
+    for(let e = 0; spans.length > e; e++) {
+  
+      // Somewhat of a hack to do element content comparison when
+      // browsers render inner tags differently
+      const 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
+    const msg = document.createElement("span");
+    msg.id = "form-message-" + wrapper.querySelector('[data-validate]').id;
+    msg.innerHTML = error;
+    msg.className = "form-message";
+    let 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"
+    const spans = wrapper.getElementsByTagName('span');
+    for(let 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
+      const 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}$/;
+      const 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: '(###) ###-####'
+      const 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: '##/##/####'
+      const 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)) {
+        let 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: '##/####'
+      const date_regex = /^((0[1-9])|(1[0-2]))[\/]((19|20)[0-9][0-9])$/;
+      return date_regex.test(value);
+    });
+  
+    // set variables for regex
+    let today = new Date();
+    let currentYear = today.getFullYear();
+    currentYear = currentYear.toString();
+    let twoDigitYear = currentYear.slice(-2);
+    let lastYearDigit = twoDigitYear.slice(1);
+  
+    let datePatternStart;
+    let dateCurrentYear;
+    let 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: '##/##'
+      const 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
+      const 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
+      const 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
+      const 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
+      let 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) {
+      const zipCodePattern = /^\d{5}$/;
+      return zipCodePattern.test(value);
+    });
+  
+    validator.registerCallback('validateZipPlus4', function(value) {
+      const zipCodePattern = /^\d{5}-\d{4}$/;
+      return value.match('_____-____') || zipCodePattern.test(value);
+    });
+  
+    function setTime(masked_timeInput, initialHour, minutes) {
+      let 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;
+    }
+  }
+  
+  
+  export default ValidateForm;
+