Skip to Content
Lab 2

Interactive User Registration Form

Lab Overview

In this lab, you will build an interactive user registration form. You’ll apply your knowledge of DOM manipulation, event handling, HTML5 and JavaScript form validation, and localStorage. The form will provide real-time feedback to the user and demonstrate how to handle user input effectively and persist simple data.

Workplace Context

Imagine you’re a junior front-end developer at a startup. Your team is building a new web application, and your first task is to create the client-side functionality for the user registration page. It’s crucial that this form is user-friendly, provides clear validation feedback to prevent errors, and perhaps remembers some basic user input for convenience. This lab simulates that task, focusing on creating a responsive and interactive form.

Objectives

By the end of this lab, you will be able to:

  1. Structure an HTML form with appropriate input fields for registration.
  2. Implement real-time input validation using JavaScript event listeners (input event).
  3. Use HTML5 validation attributes (e.g., required, type, minlength, pattern).
  4. Apply the JavaScript Constraint Validation API to check validity and display custom error messages.
  5. Dynamically create and display error messages next to input fields.
  6. Handle the form submit event, prevent default submission, and perform final validation.
  7. Use localStorage to save and retrieve simple form data (e.g., username).

Instructions

Setup the Project

  1. Create a new folder named interactive-registration-form.
  2. Inside this folder, create the following files:
    • index.html
    • styles.css
    • script.js

Build the HTML Structure

  1. Create the basic HTML structure for your registration form in index.html. Include fields for: Username, Email, Password, and Confirm Password. Also, add a submit button. Ensure each input has a corresponding <span> element for error messages.

We have included an example below, for convenience, but you will need to modify it to include validation attributes and any other elements you need.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Interactive Registration Form</title>
</head>
<body>
  <div class="container">
    <h1>Register</h1>
    <form id="registrationForm" novalidate>
      <div class="form-group">
        <label for="username">Username:</label>
        <input type="text" id="username" name="username">
        <span class="error-message" id="usernameError"></span>
      </div>
      <div class="form-group">
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>
        <span class="error-message" id="emailError"></span>
      </div>
      <div class="form-group">
        <label for="password">Password:</label>
        <input type="password" id="password" name="password">
        <small>Password must be at least 8 characters long, include an uppercase letter, a lowercase letter, and a number.</small>
        <span class="error-message" id="passwordError"></span>
      </div>
      <div class="form-group">
        <label for="confirmPassword">Confirm Password:</label>
        <input type="password" id="confirmPassword" name="confirmPassword">
        <span class="error-message" id="confirmPasswordError"></span>
      </div>
      <button type="submit">Register</button>
    </form>
  </div>
  <script src="script.js"></script>
</body>
</html>

Style the Application

  1. Add some basic styles in styles.css to make the form presentable and to style the error messages.

Again, an example is provided below, for convenience, but you can modify it as you see fit.

body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
}
 
.container {
  background-color: #fff;
  padding: 20px 30px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  width: 400px;
}
 
h1 {
  text-align: center;
  color: #333;
}
 
.form-group {
  margin-bottom: 15px;
}
 
.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}
 
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"] {
  width: calc(100% - 22px); /* Account for padding and border */
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box; /* Makes width calculation easier */
}
 
.form-group input:invalid {
  border-color: #e74c3c; /* Light red for invalid built-in states */
}
/* You can add a .valid class if you want to style valid inputs too */
 
.form-group .error-message {
  display: block;
  color: #e74c3c; /* Red for error messages */
  font-size: 0.9em;
  margin-top: 5px;
  min-height: 1em; /* Reserve space to prevent layout shifts */
}
 
.form-group small {
    display: block;
    font-size: 0.8em;
    color: #777;
    margin-top: 3px;
}
 
button[type="submit"] {
  width: 100%;
  padding: 10px;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}
 
button[type="submit"]:hover {
  background-color: #2980b9;
}

Implement the JavaScript

  1. In script.js, implement the core validation logic.
    • Select all necessary DOM elements (form, inputs, error message spans).
    • Load saved username: On page load, check if a username is saved in localStorage. If so, pre-fill the username field.
    • Real-time validation: Add input event listeners to each field.
      • Check validity using the Constraint Validation API (inputElement.validity).
      • For the “Confirm Password” field, explicitly check if it matches the “Password” field.
      • Display appropriate custom error messages in the corresponding <span> elements. Clear messages if valid.
    • Form submission: Add a submit event listener to the form.
      • Call event.preventDefault().
      • Perform a final validation check on all fields.
      • If all fields are valid:
        • Display a success message (e.g., an alert or update a status message on the page).
        • Save the username to localStorage.
        • Optionally, reset the form.
      • If any field is invalid, ensure error messages are displayed and focus on the first invalid field.

Testing and Validation

  1. Test Basic Registration: Fill out all fields with valid data and submit the form. Verify the success message and that the username is saved in localStorage (check your browser’s Developer Tools > Application > Local Storage).
  2. Test Username Validation:
    • Try submitting with an empty username.
    • Enter a username that is too short.
    • Verify error messages appear in real-time as you type (or on blur/submit).
  3. Test Email Validation:
    • Try submitting with an empty email.
    • Enter an invalid email format (e.g., “test@”, “test.com”).
  4. Test Password Validation:
    • Try submitting with an empty password.
    • Enter a password that is too short.
    • Enter a password that doesn’t meet the pattern (e.g., all lowercase, no numbers).
    • Ensure the “Confirm Password” field shows an error if it doesn’t match the password.
  5. Test Local Storage Persistence: After a successful registration, refresh the page. The username field should be pre-filled with the value you entered.
  6. Edge Cases: Think about what happens if a user tries to bypass validation (though client-side validation is mainly for UX, server-side is for security). What happens if localStorage is full or disabled (for this lab, we assume it works, but it’s a real-world consideration)?

Reflection Questions

Include your answers to the following questions in your submission, within the README.md file:

  1. How did event.preventDefault() help in handling form submission?
  2. What is the difference between using HTML5 validation attributes and JavaScript-based validation? Why might you use both?
  3. Explain how you used localStorage to persist and retrieve the username. What are the limitations of localStorage for storing sensitive data?
  4. Describe a challenge you faced in implementing the real-time validation and how you solved it.
  5. How did you ensure that custom error messages were user-friendly and displayed at the appropriate times?

Submission

Submit your project (the interactive-registration-form folder containing index.html, styles.css, and script.js) via a GitHub repository using the Start Assignment link on Canvas or as instructed by your facilitator. Ensure your JavaScript is well-commented.

Lesson 6: Working with Local StorageSBA: The Document Object Model