I am trying to validate a form with 3 different HTML5 inputs (email, number, and name) using regex expressions. My console shows no errors but the form is not displaying the error messages I have provided in the HTML.

HTML:

1. Field One:
2. *Email Address is invalid
3. Field Two:
4. *Number is invalid
5. Field Three:
6. *Date is invalid

Javascript: document.addEventListener("DOMContentLoaded", load);

function load(){ document.getElementById("regEx").addEventListener("submit", validate);

}

function validate(e){ hideAllErrors();

// Determine if the form has errors if(formHasErrors()){ // Prevents the form from submitting e.preventDefault(); // Returning false prevents the form from submitting return false; }

return true; }

// This is a function I am having trouble with**

/* formHasErrors function returns a true if errors are discovered returns a false if there are no errors */ function formHasErrors(){

let errorFlag = false;

// Create and test your 3 regular expressions here. // If one or any fail, remember to display the appropriate error message // and update the error flag let email = document.getElementById("email").value; let accountNumber = document.getElementById("accountNumber").value; let firstName = document.getElementById("fname").value;

let validEmail = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/; let emailError = document.getElementById("email_error");

let validAccountNumber = /^[0-9]+$/; let accountNumberError = document.getElementById("accountNumber_error");

let validFirstName = /^[A-Z]+$/i; let firstNameError = document.getElementById("firstName_error");

// Testing each regex expression if(email == "" || email.match(validEmail) == null){ emailError.style.display = "block"; emailError.style.visibility = "visible"; errorFlag = false; } else{ errorFlag = true; }

if(accountNumber == "" || accountNumber.match(validAccountNumber) == null){ accountNumberError.style.display = "block"; accountNumberError.style.visibility = "visible"; errorFlag = false; } else{ errorFlag = true; }

if(firstName == "" || firstName.match(validFirstName) == null){ firstNameError.style.display = "block"; firstNameError.style.visibility = "visible"; errorFlag = false; } else{ errorFlag = true; } return errorFlag; }

function hideAllErrors() { // Get an array of the error fields var errorFields = document.getElementsByClassName("error");

// Loop through each error field for(var i = 0;i < errorFields.length; i++){ // Hide the error field errorFields[i].style.display = "none"; } }