Handle conditionally required fields (#11)

index.html

@@ -55,7 +55,7 @@ <h2>Content</h2>
                     <legend>I want to build my message...</legend>
 
                     <input
-                        class="js-dependency"
+                        class="js-conditional"
                         id="from-scratch"
                         name="buildFrom"
                         type="radio"
@@ -66,7 +66,7 @@ <h2>Content</h2>
                     <label for="from-scratch">...from scratch.</label>
 
                     <input
-                        class="js-dependency"
+                        class="js-conditional"
                         id="from-json"
                         name="buildFrom"
                         type="radio"
@@ -76,22 +76,24 @@ <h2>Content</h2>
                     <label for="from-json">...from JSON I already have.</label>
                 </fieldset>
 
-                <p class="js-dependency" data-build-from="scratch">
+                <p class="js-conditional" data-build-from="scratch">
                     <label for="message">Message</label>
                     <textarea
                         id="message"
                         maxlength="2000"
                         name="content"
                         rows="5"
+                        required
                     ></textarea>
                 </p>
 
-                <p class="js-dependency" data-build-from="json">
+                <p class="js-conditional" data-build-from="json">
                     <label for="payload-json">Message JSON</label>
                     <textarea
                         id="payload-json"
                         name="payload_json"
                         rows="5"
+                        required
                     ></textarea>
                 </p>
 

main.js

@@ -1,8 +1,8 @@
 import * as Send from "/modules/send.js";
-import * as HandleDependencies from "/modules/dependent-input.js";
+import * as ConditionalInput from "/modules/conditional-input.js";
 
 const form = document.querySelector("form");
 const output = document.querySelector("output");
 
 Send.initialize(form, output);
-HandleDependencies.initialize(form);
+ConditionalInput.initialize(form);

modules/conditional-input.js

@@ -0,0 +1,85 @@
+/* HTML requirements:
+
+For triggers:
+    - Must be an <input>
+    - Must have class js-conditional
+    - Must have a name
+    - Must have a value
+
+For followers:
+    - Must not be an input
+    - Must have class js-conditional
+    - Must have data attribute with name and value corresponding to intended trigger
+
+Triggers and followers must be in the same form.
+*/
+
+let targetClass = "js-conditional";
+let form;
+let triggers, followers;
+let requiredStorage = [];
+
+function initialize(f) {
+    form = f;
+
+    triggers = form.querySelectorAll(`input.${targetClass}`);
+    followers = form.querySelectorAll(`.${targetClass}:not(input)`);
+
+    triggers.forEach((trigger) => {
+        // consider initial states
+        if (trigger.checked) {
+            updateFollowers(trigger.name, trigger.value);
+        }
+
+        // update on change
+        trigger.addEventListener("change", () => {
+            updateFollowers(trigger.name, trigger.value, trigger.checked);
+        });
+    });
+}
+
+function updateFollowers(key, value, checked = true) {
+    followers.forEach((follower) => {
+        if (follower.dataset[key]) {
+            if (checked && follower.dataset[key] == value) {
+                follower.removeAttribute("hidden");
+                recallRequired(follower);
+            } else {
+                follower.setAttribute("hidden", "");
+                storeRequired(follower);
+            }
+        }
+    });
+}
+
+/*
+hidden, required elements are still considered in validation,
+so we need to make them un-required when we hide them
+*/
+function storeRequired(element) {
+    if (element.required) {
+        requiredStorage.push(element);
+        element.removeAttribute("required");
+    }
+
+    let children = Array.from(element.children);
+
+    children.forEach((child) => {
+        storeRequired(child);
+    });
+}
+
+function recallRequired(element) {
+    if (requiredStorage.includes(element)) {
+        element.setAttribute("required", "");
+        requiredStorage = requiredStorage.filter((x) => x !== element);
+    }
+
+    let children = Array.from(element.children);
+
+    children.forEach((child) => {
+        recallRequired(child);
+    });
+}
+
+export { initialize };

modules/send.js

@@ -17,7 +17,6 @@ function handleSubmit(event) {
     output.value = "";
     submitButton.setAttribute("disabled", "");
 
-    // TODO: Need to teach this how to check dependent fields
     if (form.elements.buildFrom.value === "json") {
         body.append("payload_json", form.elements.payload_json.value);
     } else {
@@ -28,8 +27,6 @@ function handleSubmit(event) {
         body: body,
         method: "POST",
     }).then((response) => {
-        console.log(response);
-
         displayResponse(response);
     });