Client side Validation Switch

tasks/calc/formValidation.js

@@ -1,23 +1,33 @@
-// Example starter JavaScript for disabling form submissions if there are invalid fields
-document.addEventListener("DOMContentLoaded", () => {
-  "use strict";
+"use strict";
 
-  // Fetch all the forms we want to apply custom Bootstrap validation styles to
+document.addEventListener("DOMContentLoaded", () => {
+  const _switch = document.getElementById("clientSideValidate");
+  _switch.addEventListener("change", () =>
+    _switch.checked ? addValidation() : removeValidation()
+  );
+});
+
+const handler = (event) => {
+  if (!event.target.checkValidity()) {
+    event.preventDefault();
+    event.stopPropagation();
+  }
+
+  event.target.classList.add("was-validated");
+};
+
+const addValidation = () => {
   const forms = document.querySelectorAll(".needs-validation");
 
-  // Loop over them and prevent submission
   Array.from(forms).forEach((form) => {
-    form.addEventListener(
-      "submit",
-      (event) => {
-        if (!form.checkValidity()) {
-          event.preventDefault();
-          event.stopPropagation();
-        }
-
-        form.classList.add("was-validated");
-      },
-      false
-    );
+    form.addEventListener("submit", handler, false);
   });
-});
+};
+
+const removeValidation = () => {
+  const forms = document.querySelectorAll(".needs-validation");
+
+  Array.from(forms).forEach((form) => {
+    form.removeEventListener("submit", handler, false);
+  });
+};

tasks/calc/index.php

@@ -19,8 +19,6 @@
   include_once "../../base/headers.php";
   Headers::html();
 
-  $result = "";
-
   if (
     isset($_POST["operand1"], $_POST["operand2"], $_POST["operator"]) &&
     is_numeric($_POST["operand1"]) &&
@@ -49,13 +47,32 @@
         $result = $operand1 / $operand2;
         break;
     }
+  } else if (isset($_POST["firstLoad"])) {
+    $errors = [];
+
+    if (!isset($_POST["operand1"]))
+      array_push($errors, "Operand 1 not set");
+    else if (!is_numeric($_POST["operand1"]))
+      array_push($errors, "Operand 1 not numeric");
+
+    if (!isset($_POST["operand2"]))
+      array_push($errors, "Operand 2 not set");
+    else if (!is_numeric($_POST["operand2"]))
+      array_push($errors, "Operand 2 not numeric");
+
+    if (!isset($_POST["operator"]))
+      array_push($errors, "No operator chosen");
   }
   ?>
 
+  <div class="form-check form-switch m-3">
+    <input class="form-check-input" type="checkbox" role="switch" id="clientSideValidate">
+    <label class="form-check-label" for="clientSideValidate">Use Client Side Validation</label>
+  </div>
   <form method="post" class="p-3 needs-validation" novalidate>
     <div class="mb-3">
       <label class="form-label" for="operand1">Operand 1</label>
-      <input class="form-control" id="operand1" type="number" name="operand1" value="<?php echo is_numeric($result) ? $result : 0 ?>" required step="any" />
+      <input class="form-control" id="operand1" type="number" name="operand1" value="<?php echo isset($result) && is_numeric($result) ? $result : 0 ?>" required step="any" />
       <div class="invalid-feedback">
         Please enter a number
       </div>
@@ -88,12 +105,19 @@
         Please choose an operator
       </div>
     </div>
-    <button class="btn btn-primary mt-3">Berechnen</button>
+    <button class="btn btn-primary mt-3" name="firstLoad" value="0">Berechnen</button>
   </form>
   <div class="spacer-1"></div>
-  <h2 class="m-3">
-    Result: <?= $result ?>
-  </h2>
+  <?php if (isset($result)) { ?>
+    <h2 class="m-3">
+      Result: <?= $result ?>
+    </h2>
+  <? } ?>
+  <?php if (isset($errors)) {
+    foreach ($errors as $error) { ?>
+      <h2 class="text-danger"><?= $error ?></h2>
+  <?php }
+  } ?>
 </body>
 
 </html>