form validation

8-bit-sheep · Jul 23, 2019 · e4ec0b0 · e4ec0b0
1 parent fa5f0ef
commit e4ec0b0
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 7 deletions.
diff --git a/user-questions.html b/user-questions.html
@@ -17,16 +17,48 @@ <h3 id="brief">
           that you want people to learn?
         </h3>
         <form>
+          <input
+            type="text"
+            name="username"
+            placeholder="Username"
+            id="username"
+          />
           <h3>Choose segment</h3>
           <select id="contentSelector" name="contentSegment"> </select>
           <h3>The question</h3>
-          <input type="text" name="question" value="Your Question" />
-          <input type="text" name="choice1" value="Choice 1" />
-          <input type="text" name="choice2" value="Choice 2" />
-          <input type="text" name="choice3" value="Choice 3" />
-          <input type="text" name="choice4" value="Choice 4" />
+          <input
+            type="text"
+            name="question"
+            placeholder="Your Question"
+            id="question"
+          />
+          <input
+            type="text"
+            name="choice1"
+            placeholder="Choice 1"
+            id="choice1"
+          />
+          <input
+            type="text"
+            name="choice2"
+            placeholder="Choice 2"
+            id="choice2"
+          />
+          <input
+            type="text"
+            name="choice3"
+            placeholder="Choice 3"
+            id="choice3"
+          />
+          <input
+            type="text"
+            name="choice4"
+            placeholder="Choice 4"
+            id="choice4"
+          />
           <h3>Indicate correct answer:</h3>
-          <select name="answer">
+          <select name="answer" id="answer">
+            <option value="choose">Choose correct</option>
             <option value="1">1</option>
             <option value="2">2</option>
             <option value="3">3</option>
@@ -35,7 +67,16 @@ <h3>Indicate correct answer:</h3>
           <h3>Can be an open question?</h3>
           <input type="checkbox" name="open" value="true" />
 
-          <input class="btn" type="submit" value="Submit" />
+          <button
+            class="btn"
+            type="submit"
+            value="Submit"
+            id="submitBtn"
+            onclick="submitForm(event)"
+            disabled
+          >
+            Submit
+          </button>
         </form>
 
         <a class="btn" href="index.html">Go Home</a>

diff --git a/user-questions.js b/user-questions.js
@@ -20,3 +20,29 @@ d3.csv(
     ""
   );
 });
+const username = document.getElementById("username");
+const submitBtn = document.getElementById("submitBtn");
+const question = document.getElementById("question");
+const choice1 = document.getElementById("choice1");
+const choice2 = document.getElementById("choice2");
+const choice3 = document.getElementById("choice3");
+const choice4 = document.getElementById("choice4");
+const answer = document.getElementById("answer");
+
+filledForm = () =>
+  !(
+    username.value &&
+    answer.value !== "choose" &&
+    question.value &&
+    choice1.value &&
+    choice2.value &&
+    choice3.value &&
+    choice4.value
+  );
+username.addEventListener("keyup", () => (submitBtn.disabled = filledForm()));
+question.addEventListener("keyup", () => (submitBtn.disabled = filledForm()));
+choice1.addEventListener("keyup", () => (submitBtn.disabled = filledForm()));
+choice2.addEventListener("keyup", () => (submitBtn.disabled = filledForm()));
+choice3.addEventListener("keyup", () => (submitBtn.disabled = filledForm()));
+choice4.addEventListener("keyup", () => (submitBtn.disabled = filledForm()));
+answer.onchange = () => (submitBtn.disabled = filledForm());