Validating Other Input

Validating radio, selection, and checkbox input requires slightly different JavaScript code from what we've done so far.

Above our validateForm(evt) function will add code that insures a radio button is selected. We use a for loop to reset the error styles of all buttons, we then verify each button’s checked statues by accessing it content as part of an array using the .getElementsByName method. if not checked each button returns falsy which then becomes truthy with our not operator. Keep in mind that our “and” logical operator returns truthy, only if the right and left operand are also truthy. Thus, preventing this code to execute if an option is already selected. The reset of our code follows the same logic as our text input function.

Note that our throw statement is placed outside the for loop yet still in our if statement, as iterating the throw statement offers no purpose.

function validateCPU() {
var fieldsetValidity = true;
var errorDiv = document.querySelectorAll("div.componentsErrorMessage");
var cpu = document.getElementsByName("CPU");
try {
// reset styles to valid state
for (i = 0; i < cpu.length; i++) { cpu[i].style.outline = ""; }
errorDiv[0].style.display = "none";
if (!cpu[0].checked && !cpu[1].checked) {
// verify that a cpu is selected
	for ( var i = 0; i < cpu.length; i++) {
	cpu[i].style.outline = "1px solid red";}
	throw "Please Select A CPU";
	}
}
catch(msg) {
errorDiv[0].style.display = "block";
errorDiv[0].innerHTML = msg;
formValidity = false; }
}

We can then add this function to the call stack in our validateForm(evt) function right below our last function call.

// add calls below to validation functions
validatePersonalInfo();
validateCPU();

To validate a selection box, we must first create a function that changes its selected index to -1. This insures no value is preselected, and that any selection is directly chosen by the user. Insert the following code above our validatePersonalInfo() function.

/* remove default values and formatting from Brand of Choice selection lists */
function removeSelectDefaults() {
var emptyBoxes = document.getElementById("field7");
emptyBoxes.selectedIndex = -1;
}

We now need to insure this code executes every time our page is loaded. To achieve this, simple make a call to it from our setUpPage() function.

function setUpPage() {
createEventListeners();
removeSelectDefaults();
}

We can finally begin implementing our selection box input validation, adding it above our validateForm(evt) function. This if statement includes a strict equal operator that executes if the selected index remains equal to -1 on form submission.

function validateBrand() {
var fieldsetValidity = true;
var errorDiv = document.querySelectorAll("div.componentsErrorMessage");
var brandOfChoice = document.getElementById("field7")
try {
// reset styles to valid state
brandOfChoice.style.border = "";
errorDiv[2].style.display = "none";
errorDiv[2].innerHTML = "";
	if (brandOfChoice.selectedIndex === -1) {
	throw "Please Specify Your Brand Of Choice";
	}
}
catch(msg) {
	errorDiv[2].style.display = "block";
	errorDiv[2].innerHTML = msg;
	formValidity = false;}
}

Dont forget to add this function to the call stack in our validateForm(evt) function right below our last function call.

// add calls below to validation functions
validatePersonalInfo();
validateCPU();
validateBrand();

I contemplated Whether I should include code for validating checkboxes, as the process is completely identical to that of performing validation on radio buttons. The code below uses the exact process of our validateCPU() function from earlier.

function validateStorage() {
var fieldsetValidity = true;
var errorDiv = document.querySelectorAll("div.errorMessage");
var storage = document.getElementsByName("Preferred-Storage");
try {
// reset styles to valid state
for (i = 0; i < storage.length; i++) { storage[i].style.outline = ""; }
errorDiv[1].style.display = "none";
errorDiv[1].innerHTML = "";
if (!storage[0].checked && !storage[1].checked && !storage[2].checked && !storage[3].checked)  {
	for ( var i = 0; i < storage.length; i++) {
	storage[i].style.outline = "1px solid red";}
throw "Please Specify One or More Storage Devices";
	}
  }
catch(msg) {
	errorDiv[1].style.display = "block";
	errorDiv[1].innerHTML = msg;
	formValidity = false;}
}

After adding this function to the call stack in our validateForm(evt) function right below our last function call, we can finally call it a day.

// add calls below to validation functions
validatePersonalInfo();
validateCPU();
validateBrand();
validateStorage();

Since our form length has substantially increased, the working example we've provided will now incorporate a scroll feature to display the top-level error message in our validateForm(evt) function.

else {
document.getElementById("errorText").innerHTML = "Please fix the indicated problems and then resubmit your form.";
document.getElementById("errorText").style.display = "block";
document.getElementById("formTop").scrollIntoView({behavior: "smooth"});
	}
}

To see our new JavaScript Program in action, test the latest additions to the from below.

Note that upon form validation you will automatically be redirected to the final tutorial.