Improve client-side validation for payment add/edit form (#20)

pages.php

@@ -50,7 +50,10 @@ define("PAGES", [
         ]
     ],
     "editpayment" => [
-        "title" => "Edit Payment"
+        "title" => "Edit Payment",
+        "scripts" => [
+            "static/js/editpayment.js"
+        ]
     ],
     "events" => [
         "title" => "Events",

pages/editpayment.php

@@ -31,7 +31,7 @@ if (!empty($_GET['id']) && $database->has('payments', ['paymentid' => $_GET['id'
 }
 ?>
 
-<form action="action.php" method="post">
+<form action="action.php" method="post" id="editform">
 
     <div class="card">
 
@@ -68,7 +68,8 @@ if (!empty($_GET['id']) && $database->has('payments', ['paymentid' => $_GET['id'
                         "name" => "familyid",
                         "type" => "select",
                         "value" => $data["family"],
-                        "options" => $familylist
+                        "options" => $familylist,
+                        "error" => "Choose a family."
                     ],
                     [
                         "label" => "Amount",
@@ -77,16 +78,17 @@ if (!empty($_GET['id']) && $database->has('payments', ['paymentid' => $_GET['id'
                         "type" => "number",
                         "maxlength" => 5,
                         "value" => $data["amount"],
-                        "width" => 2
+                        "width" => 2,
+                        "error" => "Enter a dollar amount."
                     ],
                     [
                         "label" => "Date",
                         "icon" => "fas fa-calendar",
                         "name" => "date",
                         "type" => "date",
-                        "maxlength" => 20,
                         "value" => $data["date"],
-                        "width" => 3
+                        "width" => 3,
+                        "error" => "Choose a date for the payment."
                     ],
                     [
                         "label" => "Type",
@@ -102,7 +104,8 @@ if (!empty($_GET['id']) && $database->has('payments', ['paymentid' => $_GET['id'
                             "Free" => "Free",
                             "Other" => "Other"
                         ],
-                        "width" => 3
+                        "width" => 3,
+                        "error" => "Select a payment type."
                     ]
                 ];
 
@@ -124,6 +127,13 @@ if (!empty($_GET['id']) && $database->has('payments', ['paymentid' => $_GET['id'
                                            aria-label="<?php echo $item['label']; ?>"
                                            maxlength="<?php echo $item['maxlength']; ?>"
                                            <?php
+                                           if (!empty($item['pattern'])) {
+                                               ?>
+                                               pattern="<?php echo $item['pattern']; ?>"
+                                               <?php
+                                           }
+                                           ?>
+                                           <?php
                                            if (!empty($item['value'])) {
                                                ?>
                                                value="<?php echo htmlspecialchars($item['value']); ?>"
@@ -148,6 +158,9 @@ if (!empty($_GET['id']) && $database->has('payments', ['paymentid' => $_GET['id'
                                     <?php
                                 }
                                 ?>
+                                <div class="invalid-feedback">
+                                    <?php echo $item['error']; ?>
+                                </div>
                             </div>
                         </div>
                     </div>
@@ -194,7 +207,7 @@ if (!empty($_GET['id']) && $database->has('payments', ['paymentid' => $_GET['id'
         ?>
 
         <div class="card-footer d-flex">
-            <button type="submit" class="btn btn-success mr-1">
+            <button type="submit" class="btn btn-success mr-1" id="savebutton">
                 <i class="fas fa-save"></i> <?php $Strings->get("Save"); ?>
             </button>
         </div>

static/js/editfamily.js

@@ -14,25 +14,6 @@ $("#add_child_row").click(function () {
     });
 });
 
-$("#editform").on("submit", function () {
-    // Do some client-side validation that isn't handled by the browser
-    var phone = $("input[name=phone]").val();
-    var zip = $("input[name=zip]").val();
-    var ok = true;
-
-
-    if (/^[0-9]{10}$/.test(phone) == false) {
-        ok = false;
-        $("input[name=phone]").addClass()
-    }
-
-    if (/^[0-9]{5}(-?[0-9]{4})?$/.test(zip) == false) {
-        ok = false;
-    }
-
-    return ok;
-});
-
 $("#savebutton").click(function (event) {
     var form = $("#editform");
 

static/js/editpayment.js

@@ -0,0 +1,16 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+
+$("#savebutton").click(function (event) {
+    var form = $("#editform");
+
+    if (form[0].checkValidity() === false) {
+        event.preventDefault()
+        event.stopPropagation()
+    }
+    form.addClass('was-validated');
+});