Client side Validation Switch

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>