Merge pull request #3424 from TechnologyEnhancedLearning/Develop/Fix/TD-5308-Edit-the-branding-errors

TD-5308-Validation added to check for whitespaces while adding new brands and categories.

Author: rshrirohit

DigitalLearningSolutions.Web/Scripts/frameworks/branding.ts

@@ -10,8 +10,11 @@ function brandChanged() {
   if (style === 'block') {
     tb.value = '';
     tb.required = true;
+    tb.setCustomValidity("");
     tb.focus();
   } else {
+    tb.value = "";
+    tb.setCustomValidity("");
     tb.required = false;
   }
 }
@@ -27,8 +30,11 @@ function categoryChanged() {
   if (style === 'block') {
     tb.value = '';
     tb.required = true;
+    tb.setCustomValidity("");
     tb.focus();
   } else {
+    tb.value = "";
+    tb.setCustomValidity("");
     tb.required = false;
   }
 }
@@ -44,8 +50,41 @@ function topicChanged() {
   if (style === 'block') {
     tb.value = '';
     tb.required = true;
+    tb.setCustomValidity("");
     tb.focus();
   } else {
+    tb.value = "";
+    tb.setCustomValidity("");
     tb.required = false;
   }
 }
+const form = document.querySelector("form") as HTMLFormElement;
+const bfield = <HTMLInputElement>document.getElementById('brand-field');
+const cfield = <HTMLInputElement>document.getElementById('category-field');
+const tfield = <HTMLInputElement>document.getElementById('topic-field');
+function wireClearOnInput(input: HTMLInputElement) {
+  input.addEventListener("input", () => {
+    input.setCustomValidity("");
+  });
+}
+
+if (bfield) wireClearOnInput(bfield);
+if (cfield) wireClearOnInput(cfield);
+if (tfield) wireClearOnInput(tfield);
+
+form.addEventListener("submit", (e: Event) => {
+  [
+    { el: bfield, msg: "Please enter a valid brand." },
+    { el: cfield, msg: "Please enter a valid category." },
+    { el: tfield, msg: "Please enter a valid topic." }
+  ].forEach(f => {
+    if (f.el.required && !f.el.value.trim()) {
+      e.preventDefault();
+      f.el.setCustomValidity(f.msg);
+      f.el.reportValidity();
+      f.el.focus();
+    } else {
+      f.el.setCustomValidity("");
+    }
+  });
+});