Zone:
++ Zone†: +
+ † + On the MTA's PDF schedule for your route +
Destination:
OK
+ - + @@ -687,21 +745,47 @@ */ function compute_marc_zone(src, dest) { - /* Sorted on the first component, then the second */ + /* Sorted on the first component, then the second. + * + * Key: + * + * $6.00 => 1 + * $7.00 => 2 + * $8.00 => 3 + * $9.00 => 4 + */ const zone_map = { BAL_BWE: 2, BAL_BWI: 1, + BAL_HAE: 1, + BAL_NCR: 3, BAL_SEB: 3, BAL_WAS: 4, BAL_WBL: 1, BCA_CPK: 3, BCA_WAS: 4, BWE_BWI: 1, + BWE_HAE: 1, + BWE_NCR: 1, BWE_SEB: 1, BWE_WAS: 2, BWE_WBL: 2, + BWI_HAE: 1, + BWI_NCR: 2, + BWI_SEB: 2, BWI_WAS: 3, - BWI_WBL: 1 + BWI_WBL: 1, + FRC_WAS: 4, + HAE_NCR: 2, + HAE_SEB: 2, + HAE_WAS: 3, + HAE_WBL: 1, + NCR_SEB: 1, + NCR_WAS: 1, + NCR_WBL: 3, + SEB_WAS: 1, + SEB_WBL: 3, + WAS_WBL: 4 }; /* Forward direction key for zone_map */ @@ -810,6 +894,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 +910,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 +946,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 +1021,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"; + } + }); }