I asked this question before but the solution given didn't seem to work.

I'm trying to get the errors on the form to show up right underneath each input field.

I tried targeting the divs where I want the errors for each input to show up but I don't see them show up and the whole page just refreshes on submit and goes to the top of the page.

HTML

Full Name*

Phone Number

Email Address

Preferred Method of Contact

Phone

Email

Comments*

JavaScript

// function to validate the form function isFormValid() {

// form inputs const name = document.querySelector("#fullName"); const phone = document.querySelector("#phone"); const email= document.querySelector("#email"); const preferredMethodInputs = document.getElementsByName("preferredMethod"); const comments = document.querySelector("#comments"); const errorList = document.getElementById("errorList");

// initialize errors array let errors = []; errorList.classList.add("hide"); name.classList.remove("error"); email.classList.remove("error"); phone.classList.remove("error"); comments.classList.remove("error");

// regex patterns const nameRegex = /[A-Za-z]\s[A-Za-z]/i; const phoneRegex = /^(\+\d{1,2}\s?)?\(?\d{3}\)?[\s.-]?\d{3}[\s.-]?\d{4}$/; const regexEmail = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,5}$/; // clear any previous errors errorContainer = ""; name.classList.remove("error"); phone.classList.remove("error"); email.classList.remove("error"); preferredMethodInputs.classList.remove("error"); comments.classList.remove("error"); // check to see if name matches the nameRegex if (!name.value.match(nameRegex)) { errors.push("Please provide your full name."); name.classList.add("error"); } // check to see if phone matches phoneRegex if (!phone.value.match(phoneRegex)) { errors.push("Invalid phone number."); phone.classList.add("error"); }

// check to confirm there's an email match the regexEmail if (!email.value.match(regexEmail) || email.value === "") { errors.push("Invalid email address."); email.classList.add("error"); } // check if one of the radio buttons were selected const radio1 = document.getElementById("selectedPhone"); const radio2 = document.getElementById("selectedEmail");

if (!radio1.checked && !radio2.checked) { errors.push("Please select a preferred method of contact."); radio1.classList.add("error"); radio2.classList.add("error"); }

// checking to see if there is anything in the comments box if (comments.value === "") { errors.push("Please leave a comment."); comments.classList.add("error"); } // check the amount of errors, if there are errors, display them in the error container if (errors.length > 0) { const errorList = document.querySelector("#errorList"); errorList.classList.remove("hide"); errors.forEach((error) => { const li = document.createElement("li"); li.innerHTML = error; errorList.appendChild(li); }); } }

// event listener for form form.addEventListener("submit", isFormValid);

// reset form const resetButton = form.getElementById("submit"); resetButton.addEventListener("click", () => { form.reset(); errorContainer.innerHTML = ""; fullName.classList.remove("error"); phone.classList.remove("error"); email.classList.remove("error"); preferredMethodInputs[0].classList.remove("error"); preferredMethodInputs[1].classList.remove("error"); comments.classList.remove("error"); });