Setting Up Form Validation in JavaScript: Functions and Best Practices

Written by Daniel John Dunevant on 2020-02-12 23:23:00

Finishing Up the Setup

Let’s begin where we left off. At this point we have a function called setupPage. Since we have a select input in this form we will want to create a removeSelectDefaults function. This will allow the select element to default to no selection. This gives a more professional look to your form. Which one could say is part of UX (User Experience) of a web page.

Without further adieu I’ll show you the code for this function:

 function setupPage(){ removeSelectDefaults(); createEventListeners(); } function removeSelectDefaults() { var emptyBoxes = document.getElementsByTagName("select"); for(var i = 0;i < emptyBoxes.length;i++){ emptyBoxes[i].selectedIndex=-1; } } 

As we can see the removeSelectDefaults function since it doesn’t involve an event listener it’s put in the setupPage function. It simply gathers all of the select tags and sets their select value to -1(which is effectively null). This function is not necessary even if you have select elements in your form. It’s an aesthetic thing for the most part (UX).

Event Listener Function

At the moment our createEventListeners function is empty. That’s all about to change baby! We’re putting in an onsubmit listener that will trigger our form validation function. It’ll look a little something like this:

 function createEventListeners(){ var form = document.getElementsByTagName("form")[0]; if(form.addEventListener){ form.addEventListener("submit",validateForm,false); }else if(form.attachEvent){ form.attachEvent("onsubmit",validateForm); } } 

The only thing of note here is that I use the getElementsByTagName therefore I have to treat it as an array hence why I place “[0]” at the end of the DOM call to reference the first element in the array. Phew...

Validation Function

Okay so what needs to be in the validation function? Let’s break it down into 3 parts.

1. Prevent defaults
2. Input Validation Functions
3. Show error banner if whole form invalid

With that in mind here’s the function:

 //Put this line at the top of your document var formValidity = true; function validateForm(evt){ if(evt.preventDefault){ evt.preventDefault(); }else{ evt.returnValue=false; } formValidity = true; validateUsername(); validatePassword(); validateEmail(); validateGender(); validateInterest(); if(formValidity ===true){ document.getElementById("error_form").innerHTML = ""; document.getElementById("error_form").style.display ="none"; document.getElementsByTagName("form")[0].submit(); }else{ document.getElementById("error_form").innerHTML ="Fix the indicated problems and then resubmit."; document.getElementById("error_form").style.display = "block"; scroll(0,0); } } 

Individual Input Validation

Now let’s move on to the main event which is to say validation functions. Which just so happens to involve a lot of event listeners located centrally in the createEventListeners function. This metaphor just works. Anyways we have a total of 5 inputs that need to be validated but only 4 functions need to be created. You may be confused by this. Allow me to explain...

You see the select inputs can be validated in one function. We only need to confirm that they aren’t null when the form is submitted (or still -1 in this case). For brevity of words we’ll just implement 2 functions. They will however be functionally identical apart from the select element they validate.

 function validateGender(){ var gender = document.getElementById(“gender”); var errorDiv = document.getElementById(“error_gender”); try{ if(gender.selectedIndex ==-1){ throw “Select your gender.”; } }catch(msg){ errorDiv.style.display = "block"; gender.style.background = "rgb(255,233,233)"; errorDiv.innerHTML = msg; formValidity = false; } } 

 function validateInterest(){ var interest = document.getElementById(“interest”); var errorDiv = document.getElementById(“error_interest”); try{ if(interest.selectedIndex ==-1){ throw “Select your interest.”; } }catch(msg){ errorDiv.style.display = "block"; interest.style.background = "rgb(255,233,233)"; errorDiv.innerHTML = msg; formValidity = false; } } 

If you’re following along in your editor and running this code I suggest you comment out the validate username, password, and email functions for the time being since they don’t exist yet. Now that that’s out of the way let’s cover this simple validation. We have a try statement where a condition is tested. It asks is the select’s selection equal to -1? If so then throw this error into the errorDiv below the select element. If the error is thrown the form validity is set to false. This triggers the banner above the form to be triggered also. That goes for both of the select elements.

Closing Notes

Now that we have the basic structure of validation functions down we’ll be ready next time to focus on the remaining validation functions. They will involve Regex which we will cover in some detail in the next article. Thanks and see ya next time!