hide form group errors on focus

static/css/utils/inputs.scss

@@ -66,6 +66,14 @@
   input, textarea {
     border-color: var(--color-error) !important;
   }
+
+  .form-error {
+    display: block;
+  }
+}
+
+.form-error {
+  display: none;
 }
 
 @media (max-width: 768px) {

static/js/utils/form.js

@@ -8,6 +8,9 @@
   var AUTOSUBMIT_BUTTON_SELECTOR = '[type="submit"][data-autosubmit]';
   var AJAX_SUBMIT_FLAG = 'ajaxSubmit';
 
+  var FORM_GROUP_CLASS = 'form-group';
+  var FORM_GROUP_WITH_ERRORS_CLASS = 'form-group--has-error';
+
   function formValidator(inputs) {
     var done = true;
     inputs.forEach(function(inp) {
@@ -52,6 +55,12 @@
     // inputs
     utilInstances.push(window.utils.setup('inputs', form, options));
 
+    // form group errors
+    var formGroups = Array.from(form.querySelectorAll('.' + FORM_GROUP_CLASS));
+    formGroups.forEach(function(formGroup) {
+      utilInstances.push(window.utils.setup('errorRemover', formGroup, options));
+    });
+
     form.classList.add(JS_INITIALIZED);
 
     function destroyUtils() {
@@ -165,4 +174,29 @@
       destroy: function() {},
     };
   };
+
+  // listens for focus events and removes any errors on an input
+  window.utils.errorRemover = function(formGroup, options) {
+
+    var inputElement = formGroup.querySelector('input:not([type="hidden"]), textarea, select');
+    if (!inputElement) {
+      return false;
+    }
+
+    inputElement.addEventListener('focus', focusListener);
+
+    function focusListener() {
+      var hasError = formGroup.classList.contains(FORM_GROUP_WITH_ERRORS_CLASS);
+      if (hasError) {
+        formGroup.classList.remove(FORM_GROUP_WITH_ERRORS_CLASS);
+      }
+    }
+
+    return {
+      scope: formGroup,
+      destroy: function() {
+        inputElement.removeEventListener('focus', focusListener);
+      },
+    };
+  };
 })();

static/js/utils/setup.js

@@ -37,6 +37,9 @@
 
       if (isAlreadySetup) {
         console.warn('Trying to setup a JS utility that\'s already been set up', { utility: utilName, scope, options });
+        if (!options.force) {
+          return false;
+        }
       }
     }