Add/Edit: Validate dates

Greasy Fork is available in English.
Add/Edit: Validate dates

Make invalid dates block saving instead of throwing away progress.
سوئال سوراش، ئوبزور يېزىش ياكى قوليازمىنى پاش قىلىش.
Wrap lines
// ==UserScript==
// @name         Add/Edit: Validate dates
// @namespace    https://github.com/nate-kean/
// @version      2026.1.29.2
// @description  Make invalid dates block saving instead of throwing away progress.
// @author       Nate Kean
// @match        https://jamesriver.fellowshiponego.com/members/add*
// @match        https://jamesriver.fellowshiponego.com/members/edit/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=fellowshiponego.com
// @grant        none
// @license      MIT
// ==/UserScript==

(function() {
    document.head.insertAdjacentHTML("beforeend", `
        <style id="nates-date-validation-css-fixes">
            .input-holder,
            /* Victim of CSS specificity arms race */
            #memberEditForm #existingGroupsHolder .form-group.group-dates-holder {
                border: none !important;

                &:focus-within {
                    border: none !important;
                }
                & > input.form-control.hasDatepicker,
                & input#memberEditSearchGroups {
                    border-width: 1px;
                    border-style: solid;
                    border-color: #d8d8d8;
                    margin-left: 0;

                    &.dateYear {
                        padding-left: 0 !important;
                    }

                    /* Red border if invalid AND not empty */
                    /* (Empty should not count as invalid */
                    &:invalid:not(:placeholder-shown) {
                        border-color: #fd5b63 !important;
                    }
                    &:focus {
                        border: 2px solid #176bfb !important;
                    }
                }
            }

            input#memberEditSearchGroups {
                padding-left: 26px !important;
            }

            .group-dates-holder {
                & input.hasDatepicker {
                    width: 132px !important;
                }
                & i {
                    right: 23px !important;
                }
            }

            .date-holder .input-holder i {
                top: 36px;
            }


            /* Insanely specific selector from F1 Go that I have to make extra effort to compete with */
            #memberEditForm .group-dates .input-holder:focus-within input {
                border: 2px solid #176bfb !important;
            }
        </style>
    `);

    function patch(dateField) {
        dateField.pattern = "\\d{2}\\/\\d{2}\\/\\d{4}";
        dateField.addEventListener("keyup", () => {
            // Make invalid input fields temporarily required so that the user agent
            // prevents the form from being submitted until they're corrected
            dateField.required = dateField.value.length > 0 && !dateField.checkValidity();
        });
        dateField.placeholder = dateField.placeholder || " ";
    }

    // Patch the page's date fields
    const form = document.querySelector("form#memberEditForm");
    for (const dateField of document.querySelectorAll("input.hasDatepicker")) {
        patch(dateField);
    }

    // Patch jQuery to run requestSubmit() instead of submit() on the page's form
    // so that the validation checks get run
    const patchedForm = $(form);
    patchedForm.submit = () => {
        form.requestSubmit();
    };
    const jq = $;
    window.$ = new Proxy(jq, {
        apply(target, thisArg, args) {
            if (args[0] === "#memberEditForm") return patchedForm;
            return Reflect.apply(target, thisArg, args);
        },
        get(...args) {
            return Reflect.get(...args);
        },
    });

    // Patch new date fields as they're generated in the Add Groups section
    const observer = new MutationObserver(records => {
        for (const record of records) {
            for (const node of record.addedNodes) {
                const dateField = node.querySelector(".hasDatepicker");
                if (dateField === null) continue;
                patch(dateField);
            }
        }
    });
    observer.observe(document.querySelector("#memberEditGroupHolder"), {
        subtree: true,
        childList: true,
    });
})();