105 lines
4.3 KiB
JavaScript
105 lines
4.3 KiB
JavaScript
"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();
|