3: Student Login Form

Create a web page with a student login form that validates user input and displays appropriate messages.

Project folder

In your 📁 /javascript-projects or whatever folder holds all your JavaScript projects, create a new subfolder named 📁 /login-form.

In this subfolder, create a web page file named index.html.

Use this index.html file for the HTML, CSS and JavaScript code of this project.

Include your name and student ID in the <title> tag of your index.html file.

Git version control and Vercel

Make your 📁 /login-form project folder a Git repo and push it to GitHub.

When your project is complete, import it into Vercel.

Overview

Your completed web page should:

  • Display a styled student login form with five fields: First Name, Last Name, Email, Password, and Student ID.
  • Prevent the form from submitting if any field fails validation.
  • Display a field-specific error message beneath each invalid field when the form is submitted.
  • Hide error messages for fields that pass validation.
  • Clear all fields and hide all error messages after a successful submission.
  • After successful form submission, hide the form and display a 'success' message.

Guidelines

Follow the directions in the Tutorials below:

Add comments to your code.