From 0b752a81aca7a757d1d56260a0b2f40f1b06972b Mon Sep 17 00:00:00 2001
From: Matt Westcott <matt@west.co.tt>
Date: Mon, 4 Jul 2022 22:36:58 +0100
Subject: [PATCH] Move validation into the base chooser modal implementation

---
 .../entrypoints/images/image-chooser-modal.js | 27 ++------------
 client/src/includes/chooserModal.js           | 35 ++++++++++++++++---
 2 files changed, 33 insertions(+), 29 deletions(-)

diff --git a/client/src/entrypoints/images/image-chooser-modal.js b/client/src/entrypoints/images/image-chooser-modal.js
index 36a2883fe0..71fef0e416 100644
--- a/client/src/entrypoints/images/image-chooser-modal.js
+++ b/client/src/entrypoints/images/image-chooser-modal.js
@@ -2,43 +2,20 @@ import $ from 'jquery';
 import { initTabs } from '../../includes/tabs';
 import {
   submitCreationForm,
+  validateCreationForm,
   initPrefillTitleFromFilename,
   SearchController,
 } from '../../includes/chooserModal';
-import { gettext } from '../../utils/gettext';
 
 function ajaxifyImageUploadForm(modal) {
   $('form[data-chooser-modal-creation-form]', modal.body).on(
     'submit',
     (event) => {
-      let hasErrors = false;
-      for (const input of event.currentTarget.querySelectorAll(
-        'input[required]',
-      )) {
-        if (!input.value) {
-          hasErrors = true;
-          const li = input.closest('li');
-          if (!li.classList.contains('error')) {
-            li.classList.add('error');
-            const container = input.closest('.field-content');
-            const errorPara = document.createElement('p');
-            errorPara.className = 'error-message';
-            container.appendChild(errorPara);
-            const errorSpan = document.createElement('span');
-            errorPara.appendChild(errorSpan);
-            errorSpan.innerText = gettext('This field is required.');
-          }
-        }
-      }
-      if (hasErrors) {
-        // eslint-disable-next-line no-undef
-        setTimeout(cancelSpinner, 500);
-      } else {
+      if (validateCreationForm(event.currentTarget)) {
         submitCreationForm(modal, event.currentTarget, {
           errorContainerSelector: '#tab-upload',
         });
       }
-
       return false;
     },
   );
diff --git a/client/src/includes/chooserModal.js b/client/src/includes/chooserModal.js
index acffc56d9e..f06c510ce2 100644
--- a/client/src/includes/chooserModal.js
+++ b/client/src/includes/chooserModal.js
@@ -4,6 +4,31 @@ import { initTabs } from './tabs';
 import { initTooltips } from './initTooltips';
 import { gettext } from '../utils/gettext';
 
+const validateCreationForm = (form) => {
+  let hasErrors = false;
+  form.querySelectorAll('input[required]').forEach((input) => {
+    if (!input.value) {
+      hasErrors = true;
+      const li = input.closest('li');
+      if (!li.classList.contains('error')) {
+        li.classList.add('error');
+        const container = input.closest('.field-content');
+        const errorPara = document.createElement('p');
+        errorPara.className = 'error-message';
+        container.appendChild(errorPara);
+        const errorSpan = document.createElement('span');
+        errorPara.appendChild(errorSpan);
+        errorSpan.innerText = gettext('This field is required.');
+      }
+    }
+  });
+  if (hasErrors) {
+    // eslint-disable-next-line no-undef
+    setTimeout(cancelSpinner, 500);
+  }
+  return !hasErrors;
+};
+
 const submitCreationForm = (modal, form, { errorContainerSelector }) => {
   const formdata = new FormData(form);
 
@@ -211,10 +236,11 @@ class ChooserModalOnloadHandlerFactory {
   ajaxifyCreationForm(modal) {
     /* Convert the creation form to an AJAX submission */
     $(this.creationFormSelector, modal.body).on('submit', (event) => {
-      submitCreationForm(modal, event.currentTarget, {
-        errorContainerSelector: this.creationFormTabSelector,
-      });
-
+      if (validateCreationForm(event.currentTarget)) {
+        submitCreationForm(modal, event.currentTarget, {
+          errorContainerSelector: this.creationFormTabSelector,
+        });
+      }
       return false;
     });
 
@@ -287,6 +313,7 @@ const chooserModalOnloadHandlers =
   new ChooserModalOnloadHandlerFactory().getOnLoadHandlers();
 
 export {
+  validateCreationForm,
   submitCreationForm,
   initPrefillTitleFromFilename,
   SearchController,