Move validation into the base chooser modal implementation

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;
     },
   );

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,