old_tarasis.net/FrontendMentor/newbie/ping-coming-soon-page-master/js/script.js

"use strict";

const console = window.console;
const emailInput = document.getElementById("emailInput");
const errorMessage = document.getElementById("errorMessage");
const errorSection = document.getElementById("errorSection");
const notifyButton = document.getElementById("notifyButton");

const errorMessageForgotAddress = "Whoops! It looks like you forgot to add your email";
const errorMessageInvalidAddress = "Please provide a valid email address";

/*
* 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;


/*
* Don't quite see the point in this, setting "type=email" does some validation
* Setting the input to "required" prevents submitting an empty field
*
* Only benefit I see is the being able to set an error message
* Maybe one form of solution is doing exactly that. Use onclick event on the button
*   if the field is empty, unhide the error field 
*/
function validateEmailAddress() {
    const submittedEmailAddress = document.forms.emailForm.emailInput.value;
    // test email is valid via regex
    const isValidEmailAddress = validEmailFormat.test(submittedEmailAddress);

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

function showError(message) {
    errorMessage.innerText = message;
    errorMessage.classList.add("visible");
    emailInput.classList.add("errorBorder");
    notifyButton.classList.add("notifyError");
    // errorSection.hidden = false;
}

/*
* (Possibly) To be called as user types in the email field. If an error message has been shown, 
* then hide the message and return the fields to normal 
*/
function clearError() {
    errorMessage.classList.remove("visible");
    emailInput.classList.remove("errorBorder");
    notifyButton.classList.remove("notifyError");
    // errorSection.hidden = true;
}

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();