HTML JavaScript CSS
Advanced
60 mins
Teacher/Student led
145 points
What you need:
Chromebook/Laptop/PC or iPad/Tablet

Dynamic Form Validation with JavaScript

In this step-by-step lesson, you'll learn how to validate a form using JavaScript. You'll set up a project, create a form, style it with CSS, and add JavaScript for validation. You'll validate name, email, and password fields, test the form, and as a challenge, add an age field with its validation.
Learning Goals Learning Outcomes Teacher Notes

Live Class Feed

This is a live feed of the latest activity by your students on this lesson. It will update in real-time as they work on the lesson.
Load previous activity

    1 - Setting up the project

    First, let's set up the project in CodePen.

    We will be using this environment to write and test our HTML, CSS, and JavaScript code.

    2 - Creating the form

    Now, let's create a simple form with three input fields: name, email, and password. Add the following HTML code to the HTML section of your CodePen:

    <form id='myForm'>
      <label for='txtName'>Name:</label>
      <input type='text' id='txtName'><br>
      <label for='txtEmail'>Email:</label>
      <input type='email' id='txtEmail'><br>
      <label for='txtPassword'>Password:</label>
      <input type='password' id='txtPassword'><br>
      <input type='submit' value='Submit'>
    </form>

    3 - Style the form with CSS

    In this step, we will style our form using CSS to make it look more appealing. We will add some basic styles to the form elements, such as font size, padding, and margins.

    Add the following CSS code:

    form {
      width: 300px;
      margin: 0 auto;
    }
    
    label, input {
      display: block;
      margin-bottom: 10px;
    }
    
    input[type='submit'] {
      width: 100%;
      background-color: #4CAF50;
      color: white;
      padding: 10px;
      border: none;
      cursor: pointer;
    }
    
    input[type='submit']:hover {
      background-color: #45a049;
    }

    The CSS code above styles the form by setting its width, centering it on the page, and adding some spacing between the form elements. The submit button is styled with a background color, padding, and a hover effect.

    4 - Adding JavaScript

    Next, let's add some JavaScript code to validate our form. Click on the 'JS' tab in your CodePen and add the following code:

    document.getElementById('myForm').addEventListener('submit', function(event) {
      event.preventDefault();
    
      // Your validation code will go here
    });

    This code prevents the form from submitting and allows us to add our validation code inside the event listener.

    5 - Validating the Name Field

    Let's start by validating the name field. We want to make sure the name is at least 3 characters long. Add the following code inside the event listener in your JavaScript:

    document.getElementById('myForm').addEventListener('submit', function(event) {
      event.preventDefault();
    
      // add this code
      const name = document.getElementById('txtName').value;
      if (name.length < 3) {
        alert('Name must be at least 3 characters long.');
        return;
      }
    });

    This code checks if the name is less than 3 characters long and displays an alert if it is. The return; line of code stops the execution of the function, preventing the form from being submitted if the name is too short. This ensures that the user has to enter a valid name before the form can be submitted.


    Unlock the Full Learning Experience

    Get ready to embark on an incredible learning journey! Get access to this lesson and hundreds more in our Digital Skills Curriculum.

    Copyright Notice
    This lesson is copyright of Coding Ireland. Unauthorised use, copying or distribution is not allowed.
    🍪 Our website uses cookies to make your browsing experience better. By using our website you agree to our use of cookies. Learn more