form validation text

apps/home/static/home/js/tables.js

@@ -382,7 +382,13 @@ function setDefaultModalData($modal) {
     });
 }
 
+function clearValidation($modal) {
+    $modal.find(".invalid-feedback").remove();
+    $modal.find(".is-invalid").removeClass("is-invalid");
+}
+
 async function loadModalData($modal, url) {
+    clearValidation($modal);
     const data = await ajaxRequest(url, "GET");
 
     $modal.find("[data-field]").each(function() {
@@ -409,6 +415,7 @@ async function onModalSubmit($modal, $table, url) {
         return;
     }
 
+    clearValidation($modal);
     let data = { server: selectedServer.id };
 
     $modal.find("[data-field]").each(function() {
@@ -446,7 +453,26 @@ async function onModalSubmit($modal, $table, url) {
             $modal.modal("hide");
             $table.trigger("doDataLoad");
         })
-        .catch(error => logError(error));
+        .catch(error => {
+            logError(error);
+            if (typeof error === "object" && "responseJSON" in error) {
+                renderErrorMessages($modal, error.responseJSON);
+            }
+        });
+}
+
+
+// region Modal Error Msgs
+
+function renderErrorMessages($modal, errorObj) {
+    for (const key in errorObj) {
+        const value = errorObj[key];
+        const $input = $modal.find(`[data-field="${key}"]`);
+        $input.addClass("is-invalid");
+        $input.next(".form-text").after(
+            `<div class="invalid-feedback">${value}</div>`
+        )
+    }
 }
 
 

apps/home/templates/home/modals/editSub.html

@@ -1,7 +1,7 @@
 <div id="subFormModal" class="modal modal-lg fade" data-bs-backdrop="static" tabindex="-1">
     <div class="modal-dialog modal-dialog-centered">
         <div class="modal-content rounded-1">
-            <form id="subForm" class="mb-0" novalidate>
+            <form id="subForm" class="mb-0 needs-validation" novalidate>
                 <div class="modal-header border-bottom-0">
                     <h5 class="modal-title ms-2">
                         <span class="form-create">Add</span>
@@ -66,7 +66,7 @@
                             <div class="form-check form-switch">
                                 <label for="subActive" class="form-check-label">Enabled</label>
                                 <input type="checkbox" id="subActive" name="subActive" class="form-check-input" data-field="active" tabindex="8" data-default="true">
-                                <div class="form-text"></div>
+                                <div class="form-text">Disabled Subscriptions will be ignored when processing content.</div>
                             </div>
                         </div>
                     </div>