Workaround for Email Validation Issue in Statamic

Through a failed Horizon job I found out about the following: A user had entered an email address with an accidental space before the @ symbol. This caused the email to not be able to be sent and the Horizon job to fail.

Apparently, according to some email spec, spaces are allowed in the front part of an email address (before the @ symbal), and Laravel's validation follows that (and as such, Statamic's forms as well.

I got it resoved in the following way:

1. convert all email fields to input type="email" (should have been so before)
2. Disabling native form validation (otherwise browser validation would nag about thek space before we can strip it
3. In the script that handles async sending, iterate over all fields of type="email" and strip any space that might be present in its value

sendForm: async function() {
// ...

    // Get the value of each input type email
    document.querySelectorAll('form input[type="email"]').forEach(
        function(item) {
            // Strip all spaces from the item's value
            item.value = item.value.replace(/\s/g, '');
        }
    );
// ...

Originally published at https://wentsch.me on July 27, 2023.