index.html.in: work around busted form validation in mobile Firefox

Shit's broke yo:

  https://bugzilla.mozilla.org/show_bug.cgi?id=1510450

So now when the user-agent contains both "firefox" and "mobile", we
display our own errors and disable the submit button.

diff --git a/index.html.in b/index.html.in
index 763e2694220eae446b6e19c65551ca1600f1f2f6..412abf98ac3faab64cd3465028630078ffbbb6c6 100644 (file)
--- a/index.html.in
+++ b/index.html.in
@@ -31,6 +31,16 @@
         font-weight: bold;
       }
 
+      /* Display form errors for the one browser that doesn't support
+       * them natively, mobile Firefox. We use "visibility" to toggle
+       * it on and off, but "display" to hide it completely in non-
+       * stupid web browsers. */
+      #marc-form-errors {
+        color: #a00;
+        visibility: hidden;
+        display: none;
+      }
+
       svg {
         /* Set the height to 100% of the screen, which we'll keep; and the
          * initial position to (0,0), which we're going to change
@@ -407,9 +417,14 @@
             <label for="destination8">West Baltimore (Penn Line)</label>
           </div>
 
+          <p id="marc-form-errors">OK</p>
+
           <input type="hidden" name="serviceid" value="R" />
           <input type="hidden" name="servicename" value="MARC Train" />
-          <input type="submit" name="go" value="Generate Ticket" />
+          <input type="submit"
+                 name="go"
+                 id="marc-submit"
+                 value="Generate Ticket" />
         </fieldset>
       </form>
     </div>
@@ -810,6 +825,14 @@
         menu.style.display = "none";
       }
 
+      /**
+       * Determine if the user agent is mobile Firefox.
+       */
+      function ua_is_mobile_ff() {
+        const ua = navigator.userAgent.toLowerCase();
+        return (ua.includes("firefox") && ua.includes("mobile"));
+      }
+
       /**
        * Validate the MARC form's origin/destination.
        *
@@ -818,10 +841,30 @@
        * 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.
+       *
+       * All browsers except mobile Firefox let us call setCustomValidity()
+       * to provide an error message that is displayed if the user tries
+       * to submit invalid choices. But amazingly, mobile Firefox does not:
+       *
+       *   https://bugzilla.mozilla.org/show_bug.cgi?id=1510450
+       *
+       * Instead we have to work around it (in that one browser) by
+       * showing/hiding a paragraph that we fill with the errors.
        */
       function validate_origin_destination(event) {
         const origins = document.getElementsByName("origin");
         const destinations = document.getElementsByName("destination");
+        const mfe = document.getElementById("marc-form-errors");
+        const marcsubmit = document.getElementById("marc-submit");
+
+        if (ua_is_mobile_ff()) {
+          /* Even though this is only for one browser, empty paragraphs
+           * are handled inconsistently and should be avoided as a rule.
+           * So, we make it say "OK" before we hide it. */
+          mfe.textContent = "OK";
+          mfe.style.visibility = "hidden";
+          marcsubmit.disabled = false;
+        }
 
         let src = null;
         let dest = null;
@@ -834,12 +877,24 @@
         })
 
         if (src.value === dest.value) {
-          let err = "Origin and destination are the same!";
+          let err = "Origin and destination are the same";
           dest.setCustomValidity(err);
+
+          if (ua_is_mobile_ff()) {
+            mfe.textContent = err;
+            mfe.style.visibility = "visible";
+            marcsubmit.disabled = true;
+          }
         }
         else if (compute_marc_zone(src.value, dest.value) === null) {
-          let err = "Origin and destination are on different lines!";
+          let err = "Origin and destination are on different lines";
           dest.setCustomValidity(err);
+
+          if (ua_is_mobile_ff()) {
+            mfe.textContent = err;
+            mfe.style.visibility = "visible";
+            marcsubmit.disabled = true;
+          }
         }
       }
 
@@ -897,9 +952,21 @@
          (x) => x.addEventListener("change", validate_origin_destination)
         );
 
-       /* Also do it when the page loads, because firefox likes to
-        * remember your selection even after the page reloads. */
+        /* Also do it when the page loads, because firefox likes to
+         * remember your selection even after the page reloads. */
         window.addEventListener("load", validate_origin_destination);
+
+        /* Finally, we have to babysit mobile Firefox, who doesn't
+         * support HTML5 form validation going into 2024. Turn on
+         * the little form errors paragraph so we can toggle its
+         * visibility (and make it display the error) when the user
+         * makes an invalid selection. */
+        window.addEventListener("load", () => {
+          if (ua_is_mobile_ff()) {
+            const mfe = document.getElementById("marc-form-errors");
+            mfe.style.display = "block";
+          }
+        });
       }
 
     </script>