107 lines
4.1 KiB
JavaScript
107 lines
4.1 KiB
JavaScript
"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();
|