refactor form error remover js utility

static/js/utils/form.js

@@ -9,7 +9,7 @@
   var AUTOSUBMIT_BUTTON_SELECTOR = '[type="submit"][data-autosubmit]';
   var AJAX_SUBMIT_FLAG = 'ajaxSubmit';
 
-  var FORM_GROUP_CLASS = 'form-group';
+  var FORM_GROUP_SELECTOR = '.form-group';
   var FORM_GROUP_WITH_ERRORS_CLASS = 'form-group--has-error';
 
   window.utils.form = function(form, options) {
@@ -152,7 +152,6 @@
       if (inputsValid()) {
         submitButton.removeAttribute('disabled');
       } else {
-        console.log('setting disabled', { submitButton });
         submitButton.setAttribute('disabled', 'true');
       }
     }
@@ -304,32 +303,71 @@
     setup: autoSubmitButtonUtil,
   });
 
+  /**
+   *
+   * Form Error Remover Utility
+   *  Removes errors from inputs when they are focused
+   *
+   * Attribute: [none]
+   *  (automatically setup on all form tags)
+   *
+   * Example usage:
+   *  (any regular form that can show input errors)
+   */
 
-  // listens for focus events and removes any errors on an input
+  var FORM_ERROR_REMOVER_UTIL_NAME = 'formErrorRemover';
-  window.utils.errorRemover = function(formGroup, options) {
+  var FORM_ERROR_REMOVER_UTIL_SELECTOR = 'form';
 
-    var inputElement = formGroup.querySelector('input:not([type="hidden"]), textarea, select');
+  var FORM_ERROR_REMOVER_INITIALIZED_CLASS = 'form-error-remover--initialized';
-    if (!inputElement) {
+  var FORM_ERROR_REMOVER_INPUTS_SELECTOR = 'input:not([type="hidden"]), textarea, select';
-      return false;
+
+  var formErrorRemoverUtil = function(element) {
+    var formGroups;
+
+    function init() {
+      if (!element) {
+        throw new Error('Form Error Remover utility needs to be passed an element!');
     }
 
-    inputElement.addEventListener('focus', focusListener);
+      // find form groups
+      formGroups = Array.from(element.querySelectorAll(FORM_GROUP_SELECTOR));
 
-    function focusListener() {
+      formGroups.forEach(function(formGroup) {
-      var hasError = formGroup.classList.contains(FORM_GROUP_WITH_ERRORS_CLASS);
+        if (!formGroup.classList.contains(FORM_GROUP_WITH_ERRORS_CLASS)) {
-      if (hasError) {
+          return;
-        formGroup.classList.remove(FORM_GROUP_WITH_ERRORS_CLASS);
       }
+
+        var inputElements = Array.from(formGroup.querySelectorAll(FORM_ERROR_REMOVER_INPUTS_SELECTOR));
+        if (!inputElements) {
+          return false;
     }
 
+        inputElements.forEach(function(inputElement) {
+          inputElement.addEventListener('input', function() {
+            formGroup.classList.remove(FORM_GROUP_WITH_ERRORS_CLASS);
+          });
+        });
+      });
+
+      // mark initialized
+      element.classList.add(FORM_ERROR_REMOVER_INITIALIZED_CLASS);
+
     return {
-      scope: formGroup,
+        name: FORM_ERROR_REMOVER_UTIL_NAME,
-      destroy: function() {
+        element: element,
-        inputElement.removeEventListener('focus', focusListener);
+        destroy: function() {},
-      },
     };
+    }
+
+    return init();
   };
 
+  formUtilities.push({
+    name: FORM_ERROR_REMOVER_UTIL_NAME,
+    selector: FORM_ERROR_REMOVER_UTIL_SELECTOR,
+    setup: formErrorRemoverUtil,
+  });
+
   // register the collected form utilities
   if (UtilRegistry) {
     formUtilities.forEach(UtilRegistry.register);