diff --git a/static/css/utils/inputs.scss b/static/css/utils/inputs.scss index 6bf5286e3..db16a94d3 100644 --- a/static/css/utils/inputs.scss +++ b/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) { diff --git a/static/js/utils/form.js b/static/js/utils/form.js index 2e9bbc92b..77437a3e1 100644 --- a/static/js/utils/form.js +++ b/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); + }, + }; + }; })(); diff --git a/static/js/utils/setup.js b/static/js/utils/setup.js index e9afb216b..bb3bb0e3d 100644 --- a/static/js/utils/setup.js +++ b/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; + } } }