HTML JavaScript CSS Computer Science

Intermediate

40 mins

Teacher/Student led

+105 XP

What you need:
Chromebook/Laptop/PC

Dynamic Form Validation with JavaScript

In this lesson, you'll learn to validate forms using JavaScript, ensuring users input correct data. Set up a workspace in VS Code, build a registration form, style it with CSS, and add validation for name, email, and password fields.

Learning Goals Learning Outcomes Teacher Notes

Warning: Your screen size is quite small for viewing this. Rotate your device into landscape mode if you can.

1 Introduction to Form Validation
2 Setting Up Your Project Folder
3 Creating the HTML Form
4 Adding CSS for Styling
5 Adding the JavaScript File
6 Validating the Name Field
7 Validating the Email Field
8 Validating the Password Field
9 Testing the Form
10 Challenge: Add Age Field and Validation
11 Wrap Up

1 - Introduction to Form Validation

In this lesson, you'll learn how to validate a form using JavaScript. Form validation ensures that users enter correct data before submitting, like checking if an email is valid or a password is strong. This makes web applications more reliable and user-friendly.

You'll set up a new workspace in VS Code, create a simple registration form in HTML, style it with CSS, and add JavaScript to validate the name, email, and password fields. Finally, you'll test it and tackle a challenge to add an age field with validation.

2 - Setting Up Your Project Folder

First, create a new workspace for this lesson in VS Code.

Open VS Code and follow these steps:

Click 'File' > 'Open Folder'.
Create a new folder on your computer, for example, name it 'FormValidation' in your Documents folder.
Select that folder in VS Code to set it as your workspace.

You should see the folder name in the Explorer pane on the left. This is where you'll add your files.

3 - Creating the HTML Form

Now, create the basic HTML structure with a form.

In VS Code, with your project folder open:

Right-click in the Explorer pane and select 'New File'.
Name it 'index.html'.
The file will open in the editor.

Add the following complete HTML code to 'index.html':

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form Validation Demo</title>
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <h1>Registration Form</h1>
    
    <form id="registrationForm">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name">
        <span id="nameError" class="error"></span><br><br>
        
        <label for="email">Email:</label>
        <input type="email" id="email" name="email">
        <span id="emailError" class="error"></span><br><br>
        
        <label for="password">Password:</label>
        <input type="password" id="password" name="password">
        <span id="passwordError" class="error"></span><br><br>
        
        <button type="submit">Submit</button>
    </form>
    
    <script src="js/script.js"></script>
</body>
</html>

Note that we have put in code for a stylesheet and JavaScript file, and added a form tag and inside that we have added 3 form elements; Name, Email and Password fields.

For each field we have added label, input and span tags.

Save the file (Ctrl+S or Cmd+S). This sets up a form with fields for name, email, and password, plus error spans. To view it, double-click 'index.html' in your file explorer to open it in a web browser.

+15 XP

4 - Adding CSS for Styling

To style your form, create a CSS folder and file.

In VS Code:

Right-click on your project folder in the Explorer pane and select 'New Folder'.
Name it 'css'.
Right-click on the 'css' folder and select 'New File'.
Name it 'styles.css'.

Add the following complete CSS code to 'styles.css':

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    text-align: center;
}

h1 {
    color: navy;
}

form {
    max-width: 400px;
    margin: 0 auto;
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

label {
    display: block;
    margin-bottom: 5px;
}

input {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    box-sizing: border-box;
}

button {
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
}

button:hover {
    background-color: #45a049;
}

.error {
    color: red;
    display: block;
    font-size: 0.8em;
    margin-bottom: 10px;
}

Save the file. The HTML already links to this CSS. Refresh your browser to see the styled form.

+10 XP

5 - Adding the JavaScript File

Next, create a folder for JavaScript and add a script file.

In VS Code:

Right-click on your project folder in the Explorer pane and select 'New Folder'.
Name it 'js'.
Right-click on the 'js' folder and select 'New File'.
Name it 'script.js'.

For now, leave 'script.js' empty.

Your project is now set up with HTML, CSS, and JS linked.

+5 XP

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.

Get started

Copyright Notice
This lesson is copyright of DigitalSkills.org. Unauthorised use, copying or distribution is not allowed.