Question
I can't seem to get my JavaScript errors for the radio buttons to show up. How can I check if a radio button was checked
I can't seem to get my JavaScript errors for the radio buttons to show up. How can I check if a radio button was checked or not and if it wasn't how do I get the error to show up?
HTML for the form:
Full Name* Phone Number Email Address
Preferred Method of Contact Phone Email
Comments*
JavaScript: "use strict"; // verify form let form = document.getElementById("fullForm"); function isFormValid(event) { const nameRegex = /[A-Za-z]\s[A-Za-z]/i; const errorList = document.getElementById("errorList"); const name = document.querySelector("#fullName"); const phone = document.querySelector("#phone"); const email = document.querySelector("#email"); // const emailError = document.getElementById('errorMsg').innerHTML = "Invalid or missing email address."; // const phoneError = document.getElementById("#phoneError").innerHTML = "Invalid or missing phone number." // const radio = document.getElementsByName("radio"); // const radio1 = document.getElementById("#selectedPhone"); // const radio2 = document.getElementById("#selectedEmail"); 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}$/; const comments = document.querySelector("#comments"); // creating a list of errors let errors = []; errorList.classList.add("hide"); name.classList.remove("error"); email.classList.remove("error"); phone.classList.remove("error"); comments.classList.remove("error"); // preventing default // event.preventDefault(); // 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("Missing 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("Missing email address."); email.classList.add("error"); } // HAVING ISSUES // check if one of the radio buttons were selected // if (!radio.checked) { // errors.push("Please select a preferred method of contact."); // radio.classList.add("error"); // } // check if one of the radio buttons were selected // if (button1.checked) { // alert("radio1 selected"); // } else if (button2.checked) { // alert("radio2 selected"); // } else 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 errors, then add them to a list if (errors.length > 0) { const errorList = document.querySelector("#errorList"); errorList.classList.remove("hide"); // errorList.innerHTML = ""; errors.forEach((error) => { const li = document.createElement("li"); li.innerHTML = error; errorList.appendChild(li); }); } } document.getElementById("submit").addEventListener("click", function(event) { isFormValid(); event.preventDefault(); });
Step by Step Solution
There are 3 Steps involved in it
Step: 1
Get Instant Access to Expert-Tailored Solutions
See step-by-step solutions with expert insights and AI powered tools for academic success
Step: 2
Step: 3
Ace Your Homework with AI
Get the answers you need in no time with our AI-driven, step-by-step assistance
Get Started