Update form validation code to check all required fields and eliminate jquery

client/src/entrypoints/images/image-chooser-modal.js

@@ -5,23 +5,32 @@ import {
   initPrefillTitleFromFilename,
   SearchController,
 } from '../../includes/chooserModal';
+import { gettext } from '../../utils/gettext';
 
 function ajaxifyImageUploadForm(modal) {
   $('form[data-chooser-modal-creation-form]', modal.body).on(
     'submit',
     (event) => {
-      if (!$('#id_image-chooser-upload-title', modal.body).val()) {
-        const li = $('#id_image-chooser-upload-title', modal.body).closest(
-          'li',
-        );
-        if (!li.hasClass('error')) {
-          li.addClass('error');
-          $('#id_image-chooser-upload-title', modal.body)
-            .closest('.field-content')
-            .append(
-              '<p class="error-message"><span>This field is required.</span></p>',
-            );
+      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 {