Form validation

Introduction

The first rule of web development is simple: never trust any user input.

This is because users can enter anything they want into a form field, and it’s up to you to make sure that the data is valid and safe to use.

This tutorial will walk you through how to validate user input in a sign-up form for Harmony Music Academy.

1. Presence checking

The simplest form of validation is to check if a field is empty or not. This is known as presence checking.

In our sign-up form, we want to make sure that the user has entered their email address, level, and hours per week.

Checking for empty fields

Let’s start by seeing what happens when we submit the form without entering any data.

1. If you have been following the steps in the previous tutorial on Capturing Form Data, you should already have the following code inside your index.js file:

   index.js

   // Capture user's input on form submission
   let form = document.querySelector("form");
   
   form.addEventListener("submit", function (event) {
     event.preventDefault();
   
     // Store the user's email address as userEmail (string/text)
     let userEmail = document.querySelector("#email").value;
     // Store the user's level as userLevel (string/text)
     let userLevel = document.querySelector("#level").value;
     // Store the user's hours of study as userHours (number)
     let userHours = document.querySelector("#hoursPerWeek").value;
     console.log({ userEmail, userLevel, userHours });
   });
   // Validate the user's input
   // Check if the user has selected a level
   // Check if the user has provided an email address
   // Check if the user has specified at least one hour of study
   // Check if the number of hours requested is within the allowed range
   // Calculate the total cost
   // Display the total cost to the user

2. With this code in place, start your application server in the usual way.

3. In your browser, open up the dev tools, and navigate to the ‘Console’ tab.

4. Submit the form without entering any data. You should see the following output in the console:

   

   As you can see, the userEmail and userHours values are empty strings, while userLevel is string that reads 'basic'.

   { userEmail: "", userLevel: "basic", userHours: "" }

Let’s spend a moment to understand where these values are coming from.

Note

Types of HTML input fields

1. Text inputs

1. Open your index.html file and locate the form field for the user’s email address.

   It should be somewhere around line 17, and look like this:

   index.html

   <input
     id="email"
     name="email"
     type="text"
     class="form-input"
     placeholder="Your email"
   />

   The highlighted line above shows field is of type text, which means that it accepts any kind of text input from the user.

2. When we submit the form, the value of the text box is sent to our index.js file, and captured in the userEmail variable:

   index.js

   let userEmail = document.querySelector("#email").value;

3. If the user does not enter anything in the text box, the value of the text box will simply be an empty string "".

   Tip

   Keep this value in mind, as we can use it to check whether a user has actually submitted an email address later.

2. Select boxes

1. Head back to your index.html file and locate the select box for the user’s level.

   It should be around line 27, and look like this:

   index.html

   <select id="level" name="level" class="form-input">
     <option value="basic">Basic</option>
     <option value="advanced">Advanced</option>
   </select>

2. The highlighted lines above show the options that a user can choose from.

   If you look closely, you’ll see that every option tag has a value attribute that corresponds to the level name.

   It is this value that is captured in the userLevel variable (inside index.js) when the form is submitted:

   index.js

   let userLevel = document.querySelector("#level").value;

3. If the user does not select any option, the final value of the select box will default to the value of the first option, which is 'basic'.

Checking for empty fields

Now that we know where our form values are coming from, let’s think how we can add a validation check that ensures that the user has entered an email address.

1. Inside index.js, just above the console.log() statement, add a conditional check like so:

   index.js

   // Capture user's input on form submission
   let form = document.querySelector("form");
   
   form.addEventListener("submit", function (event) {
     event.preventDefault();
   
     // Store the user's email address as userEmail (string/text)
     let userEmail = document.querySelector("#email").value;
     // Store the user's level as userLevel (string/text)
     let userLevel = document.querySelector("#level").value;
     // Store the user's hours of study as userHours (number)
     let userHours = document.querySelector("#hoursPerWeek").value;
   
     // Validate the user's input
     // Check if the user has provided an email address
     if (userEmail === "") {
       alert("Please enter your email address.");
   
       return;
     }
   
     console.log({ userEmail, userLevel, userHours });
   });

2. Save your changes, and head back over to your browser.

   Make sure your devtools console is still open, and try submitting an empty form again.

   This time, you should see an alert message that says “Please enter your email address.”

   

3. Did you notice something else as well? The console.log() statement is no longer executed when the email field is empty.

   Can you work out why?

   Solution

   This is because the return statement inside the if block stops the function from executing any further.

   if (userEmail === "") {
     alert("Please enter your email address.");
   
     return;
   }

   Any time you see a return statement inside a function, it means that the function will stop executing the code inside it at that point and return whatever value we have told it to.

   (In this case, the function returns undefined, because we haven’t specified a value to return.)

   Because of this, the console.log() statement is never reached when the email field is empty.

   This behaviour is useful because it allows us to stop the computer processing data unnecessarily if any of the fields are empty.

   Click to reveal

4. Now that we have a check in place for the email field, let’s add similar ones to validate the other form fields.

   Challenge

   Move the next two steps of your comment plan up inside the event handler function:

   index.js

   // Capture user's input on form submission
   let form = document.querySelector("form");
   
   form.addEventListener("submit", function (event) {
     event.preventDefault();
   
     // Store the user's email address as userEmail (string/text)
     let userEmail = document.querySelector("#email").value;
     // Store the user's level as userLevel (string/text)
     let userLevel = document.querySelector("#level").value;
     // Store the user's hours of study as userHours (number)
     let userHours = parseInt(document.querySelector("#hoursPerWeek").value);
   
     // Validate the user's input
     // Check if the user has provided an email address
     if (userEmail === "") {
       alert("Please enter your email address.");
   
       return;
     }
   
   // Check if the user has selected a level
   // Check if the number of hours requested is within the allowed range
   
     console.log({ userEmail, userLevel, userHours });
   });
   // Check if the user has selected a level
   // Check if the number of hours requested is within the allowed range

   Can you add checks to ensure that the userLevel and userHours fields are not submitted as empty strings? 🤔

   Expected behaviour

   • If the user has submitted an empty string for either userHours or userLevel, display an alert message to prompt them to enter the required information.
   • The function should not continue to log the form data to the console if userEmail, userHours or userLevel are empty.
   • If there are values for each of the fields, the form data should be logged to the console as before.

   Solution

   To add checks for the userHours and userLevel fields, you can follow the same pattern as the check for the userEmail field.

   index.js

   // Capture user's input on form submission
   let form = document.querySelector("form");
   
   form.addEventListener("submit", function (event) {
     event.preventDefault();
   
     // Store the user's email address as userEmail (string/text)
     let userEmail = document.querySelector("#email").value;
     // Store the user's level as userLevel (string/text)
     let userLevel = document.querySelector("#level").value;
     // Store the user's hours of study as userHours (number)
     let userHours = parseInt(document.querySelector("#hoursPerWeek").value);
   
     // Validate the user's input
     // Check if the user has provided an email address
     if (userEmail === "") {
       alert("Please enter your email address.");
   
       return;
     }
   
     // Check if the user has selected a level
     if (userLevel === "") {
       alert("Please select a level of study");
   
       return;
     }
   
     // Check if the user has specified at least one hour of study
     if (userHours === "") {
       alert("Please enter at least one hour of tuition.");
   
       return;
     }
   
     console.log({ userEmail, userLevel, userHours });
   });
   // Check if the user has selected a level
   // Check if the number of hours requested is within the allowed range
   // Calculate the total cost
   // Display the total cost to the user

   Click to reveal

2. Content validation

Presence checking is one thing, but we also need to make sure that the data entered by the user is valid.

Let’s start by checking if the user has entered a valid email address.

Checking for valid email addresses

This is actually surprising easy!

1. Open index.html

2. Locate the input field for the user’s email address.

   It should be around line 17, and look like this:

   index.html

   <input
     id="email"
     name="email"
     type="text"
     class="form-input"
     placeholder="Your email"
   />

3. The type attribute of the input field is set to text, which means that it accepts any kind of text input.

   All we need to do is change this to email:

   index.html

   <input
     id="email"
     name="email"
     type="email"
     class="form-input"
     placeholder="Your email"
   />

4. With this in place, if you submit a value in the email field that is not a valid email address, the browser will automatically display an error message.

   

Checking for valid hours

One surprisingly tricky check is to ensure that users must enter a positive integer for the number of hours.

1. Open index.js

2. Before we can check if the number is positive or not, we need to convert the value of userHours to a number.

   This is because the value of an input field is always a string, even if the HTML input field is of type number.

   To convert the value to a number, we can use the built-in JavaScript parseInt() function.

   Remove the line highlighted in red below, and replace it with the code highlighted in green:

   index.js

   form.addEventListener("submit", function (event) {
     event.preventDefault();
   
     let userEmail = document.querySelector("#email").value;
     let userLevel = document.querySelector("#level").value;
     let userHours = document.querySelector("#hoursPerWeek").value;
     let userHours = document.querySelector("#hoursPerWeek").value;
     let userHours = parseInt(document.querySelector("#hoursPerWeek").value);
   
     if (userEmail === "") {
       alert("Please enter your email address.");
   
       return;
     }
     if (userHours === "") {
       alert("Please enter at least one hour of tuition.");
   
       return;
     }
   
     console.log({ userEmail, userLevel, userHours });
   });

3. Now we can check whether the actual value is a positive number. But this is where it gets tricky.

   Unexpected behaviour

   Our previous solution of checking if the value is an empty string will no longer work, because parseInt() always returns a number, even if the user enters an empty string.

   The problem is that an empty string cannot be converted to a number, so parseInt() will instead return NaN (Not a Number) instead.

   As a result, our previous presence check which looks at whether userHours === "" will no longer work, so we need to update it.

   Remove the previous check, and modify it as follows:

   index.js

   // Capture user's input on form submission
   let form = document.querySelector("form");
   
   form.addEventListener("submit", function (event) {
     event.preventDefault();
   
     // Store the user's email address as userEmail (string/text)
     let userEmail = document.querySelector("#email").value;
     // Store the user's level as userLevel (string/text)
     let userLevel = document.querySelector("#level").value;
     // Store the user's hours of study as userHours (number)
     let userHours = parseInt(document.querySelector("#hoursPerWeek").value);
   
     // Validate the user's input
     // Check if the user has provided an email address
     if (userEmail === "") {
       alert("Please enter your email address.");
   
       return;
     }
   
     // Check if the user has selected a level
     if (userLevel === "") {
       alert("Please select a level of study");
     }
   
     // Check if the user has specified at least one hour of study
     if (userHours === "") {
     if (isNaN(userHours) || userHours < 1) {
       alert("Please enter at least one hour of tuition.");
   
       return;
     }
   
     console.log({ userEmail, userLevel, userHours });
   });
   // Check if the number of hours requested is within the allowed range
   // Calculate the total cost
   // Display the total cost to the user

4. Save your changes, and head across to your browser.

   Try submitting the form with an empty hours field, and then again with 0 or a negative number.

   In each case, should see the following alert message:

   

Validate level and hours

There are at least two more validation checks we need to consider:

• Is the level of study selected by the user valid?
• Is the number of hours requested within the allowed range for the level they have chosen (e.g., between 1 and 10 hours)?

Challenge

Can you implement these two checks in your code?

Discuss this with a partner or in a group first, and then try to implement the checks in your code.

Are there any other validation checks that you identified while planning your logic algorithm?

Expected behaviour

• If any validation check fails, display an alert message to prompt the user to enter the required information.
• The function should not continue to log the form data to the console if any of the validation checks fail.
• If all validation checks pass, the form data should be logged to the console as before.

Solution

1. Validating with an object

   There are several ways to do this, but one of the most efficient and scaleable is to use an object.

   Place this object at the top of your event listener:

   index.js

   // Capture user's input on form submission
   let form = document.querySelector("form");
   
   form.addEventListener("submit", function (event) {
     event.preventDefault();
   
     const maxHoursPerLevel = {
       basic: 5,
       advanced: 10,
     };
   
     // Store the user's email address as userEmail (string/text)
     let userEmail = document.querySelector("#email").value;
     // Store the user's level as userLevel (string/text)
     let userLevel = document.querySelector("#level").value;
     // Store the user's hours of study as userHours (number)
     let userHours = parseInt(document.querySelector("#hoursPerWeek").value);
   
     // Validate the user's input
     // Check if the user has provided an email address
     if (userEmail === "") {
       alert("Please enter your email address.");
   
       return;
     }
   
     // Check if the user has selected a level
     if (userLevel === "") {
       alert("Please select a level of study");
     }
   
   
     // Check if the user has specified at least one hour of study
     if (isNaN(userHours) || userHours < 1) {
       alert("Please enter at least one hour of tuition.");
   
       return;
     }
   
     console.log({ userEmail, userLevel, userHours });
   });
   // Calculate the total cost
   // Display the total cost to the user

2. Now, just below the check for the number of hours, add the validation code that ensures the level selected is valid, and that the number of hours requested is within the allowed range:

   index.js

   // Capture user's input on form submission
   let form = document.querySelector("form");
   
   form.addEventListener("submit", function (event) {
     event.preventDefault();
   
     const maxHoursPerLevel = {
       basic: 5,
       advanced: 10,
     };
   
     // Store the user's email address as userEmail (string/text)
     let userEmail = document.querySelector("#email").value;
     // Store the user's level as userLevel (string/text)
     let userLevel = document.querySelector("#level").value;
     // Store the user's hours of study as userHours (number)
     let userHours = parseInt(document.querySelector("#hoursPerWeek").value);
   
     // Validate the user's input
     // Check if the user has provided an email address
     if (userEmail === "") {
       alert("Please enter your email address.");
   
       return;
     }
   
     // Check if the user has selected a level
     if (userLevel === "") {
       alert("Please select a level of study");
     }
   
     // Check if the user has specified at least one hour of study
     if (isNaN(userHours) || userHours < 1) {
       alert("Please enter at least one hour of tuition.");
   
       return;
     }
   
     // Is userLevel valid?
     if (!maxHoursPerLevel.hasOwnProperty(userLevel)) {
       alert("Invalid level of study selected.");
   
       return;
     }
   
     // Is userHours within range?
     const maxAllowedHours = maxHoursPerLevel[userLevel];
     if (userHours > maxAllowedHours) {
       alert(
         `You can only study a maximum of ${maxAllowedHours} hours per week.`
       );
   
       return;
     }
   
     console.log({ userEmail, userLevel, userHours });
   });
   // Calculate the total cost
   // Display the total cost to the user

3. This is approach is most efficient because it allows you to easily add more levels and their corresponding maximum hours without having to change the validation code.

   Likewise, the maxHoursPerLevel object doubles as a reference for valid levels, as each key in the object corresponds to a valid level of study.

Validate hours against level of study

Summary

In this tutorial, you learned how to validate user input in a sign-up form for Harmony Music Academy.

We have covered:

• Presence checking to ensure that the user has entered data in all required fields.
• Content validation to ensure that the data entered is of the correct type and format.
• Using a return statement to stop the function from executing if any validation check fails.

Next steps

In the next step, we will learn how to optimise the error messages shown to users when they fail to complete the required information.