rmcg.dev/projects/FrontendMentor/newbie/base-apparel-coming-soon/js/script.js

"uses strict";

/*
 * this is my "simple" regex for email addresses. It does not cover all the possibilities that are allowed
 * for the local and domain parts. For a more "correct" / comprehensive regex, there is one at
 * https://stackoverflow.com/questions/3844431/are-email-addresses-allowed-to-contain-non-alphanumeric-characters
 *
 * For local part you can use ASCII:
 *   Latin letters A - Z a - z
 *   digits 0 - 9
 *   special characters !#$%&'*+-/=?^_`{|}~
 *   dot ., that it is not first or last, and not in sequence
 *   space and "(),:;<>@[] characters are allowed with restrictions (they are only allowed inside a quoted string, a backslash or double-quote must be preceded by a backslash)
 *   Plus since 2012 you can use international characters above U+007F, encoded as UTF-8.
 *
 * Domain part is more restricted:
 *   Latin letters A - Z a - z
 *   digits 0 - 9
 *   hyphen -, that is not first or last, multiple hyphens in sequence are allowed.
 *
 * Recommended regex is: ^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})
 */
const validEmailFormat = /^[A-Za-z0-9][\w+]*@[A-Za-z0-9]{3,}\.[A-Za-z]{2,}$/i;

const emailInput = document.getElementById("email-input");
const submitButton = document.getElementById("submit-button");
const errorMessage = document.getElementById("errorMessage");
const errorIcon = document.getElementById("error-icon");

submitButton.addEventListener("click", checkEmailValidity, false);
emailInput.addEventListener("focus", inputFocused, false);

/**
 * @param   {[Event]}  event
 */
function checkEmailValidity(event) {
    if (validateEmailAddress() === false) {
        event.preventDefault();
        emailInput.classList.add("error-border");
        errorMessage.classList.add("error-visible");
        errorIcon.classList.add("error-visible");
    } else {
        emailInput.classList.remove("error-border");
        errorMessage.classList.remove("error-visible");
    }
}

/*
 */
function validateEmailAddress() {
    const submittedEmailAddress = emailInput.value;
    // test email is valid via regex
    const isValidEmailAddress = validEmailFormat.test(submittedEmailAddress);

    if (submittedEmailAddress.length === 0) {
        return false;
    } else if (!isValidEmailAddress) {
        return false;
    } else {
        return true;
    }
}

// When an input has focus I remove the error state,
function inputFocused(event) {
    /**
     * Just for VS Code intellisense
     *
     * @type {HTMLInputElement}
     */
    const input = event.currentTarget;
    if (input.classList.contains("error-border")) {
        input.classList.remove("error-border");
        errorMessage.classList.remove("error-visible");
        errorIcon.classList.remove("error-visible");
    }
}

function testRegex() {
    console.log("Should all be false");
    console.log(validEmailFormat.test("submittedEmailAddress"));
    console.log(validEmailFormat.test("s@.NET"));
    console.log(validEmailFormat.test("@"));
    console.log(validEmailFormat.test("@."));
    console.log(validEmailFormat.test("@.net"));
    console.log(validEmailFormat.test("@tarasis.net"));
    console.log(validEmailFormat.test("adsadasds@"));
    console.log(validEmailFormat.test("__submittedEmailAddress"));
    console.log(validEmailFormat.test("spam@tarasis.99"));
    console.log(validEmailFormat.test("rob@.net"));
    console.log(validEmailFormat.test("spam@tarasis"));
    console.log(validEmailFormat.test("spam@tarasis.a"));
    console.log(validEmailFormat.test("s@ta.net"));
    console.log(validEmailFormat.test("_@tarasis.net"));
    console.log(validEmailFormat.test("_3@tarasis.net"));

    console.log("\n Should all be true");
    console.log(validEmailFormat.test("spam@tarasis.net"));
    console.log(validEmailFormat.test("rob@tad.io"));
    console.log(validEmailFormat.test("s@tarasis.net"));
    console.log(validEmailFormat.test("s@tarasis.net"));
    console.log(validEmailFormat.test("s_@tarasis.net"));
    console.log(validEmailFormat.test("s+blah@tarasis.net")); // this can be true, some servers use this for filtering
}

// testRegex();