index.html.in: validate MARC origin/destination before submission

diff --git a/index.html.in b/index.html.in
index 44f5db51ba77b62ffad7371b5e4ccbbf2ee5f3f3..a76e2ec36e1ae4deaad74fdddf1599c020e414d7 100644 (file)
--- a/index.html.in
+++ b/index.html.in
@@ -680,8 +680,7 @@
        * Compute the zone (string) for the given origin/destination pair.
        *
        * If we don't know it or if you chose in invalid pair (destination
-       * not on the same line as your origin?) then the empty string is
-       * returned.
+       * not on the same line as your origin?) then null is returned.
        */
       function compute_marc_zone(src, dest) {
 
@@ -732,7 +731,7 @@
           case 4:
             return "Four Zone";
           default:
-            return "";
+            return null;
         }
       }
 
@@ -752,7 +751,8 @@
         const dest = params.get("destination");
 
         if (src && dest) {
-          /* MARC Train */
+          /* MARC Train. We can assume that compute_marc_zone() doesn't
+           * return null because that's part of our form validation. */
           const zone = compute_marc_zone(src, dest);
           set_zone(zone);
         }
@@ -807,6 +807,34 @@
         menu.style.display = "none";
       }
 
+      /**
+       * Validate the MARC form's origin/destination.
+       *
+       * We don't want the user to be able to choose a pair of stops that
+       * aren't actually connected by the same MARC line. If we don't have
+       * zone information for the (origin,destination) pair, that indicates
+       * that it's probably not a valid choice; otherwise I would have
+       * filled in the information from the CharmPass app already.
+       */
+      function validate_origin_destination(event) {
+        const origins = document.getElementsByName("origin");
+        const destinations = document.getElementsByName("destination");
+
+        let src = null;
+        let dest = null;
+        origins.forEach((x) => { if (x.checked) src = x; })
+        destinations.forEach((x) => {
+          if (x.checked) dest = x;
+
+          /* clear all errors before possibly setting one */
+          x.setCustomValidity('');
+        })
+
+        if (compute_marc_zone(src.value, dest.value) === null) {
+          let err = "Origin and destination are on different lines!";
+          dest.setCustomValidity(err);
+        }
+      }
 
       /*****************************************************/
       /* Add event handlers for all of the functions above */
@@ -851,6 +879,17 @@
         /* Swap colors when the screen is tapped */
         document.body.addEventListener("click", swap_day_night);
       }
+      else {
+        /* If we haven't submitted the form yet, set up change handlers
+         * for the origin/destination radio buttons that validate that
+         * the origin and destination are on the same line. */
+        document.getElementsByName("origin").forEach(
+         (x) => x.addEventListener("change", validate_origin_destination)
+        );
+        document.getElementsByName("destination").forEach(
+         (x) => x.addEventListener("change", validate_origin_destination)
+        );
+      }
 
     </script>
   </body>