Loading lesson path

JavaScript•Debugging, Projects, and Reference

Project - Form Validation

Flash cards

Review the key moves

1/4

Core idea

What is the main idea behind Project - Form Validation?

Lesson checks

Practice each idea before moving on

Short Mimo-style checks built from this lesson's code, terms, and sequence.

1Quick choice

Which statement best captures the main point of this lesson?

2Fill blank

Complete the missing token from the example code.

<___ id="signupForm">

3Order

Put the learning moves in the order that makes the concept easiest to apply.

Step 1 - Create the HTML

What You Will Learn

Project - Form Validation

In this project you will build a form with validation.

The form will show error messages under each input field, and it will not submit until everything is valid.

What You Will Learn

How to validate form fields with JavaScript
How to prevent a form from submitting
How to show error messages under inputs
How to check email and password rules

Step 1 - Create the HTML

Create a form with four fields and an error message under each field.

<form id="signupForm">
<div class="field">
<label>Name:</label><br>
<input id="name" type="text" placeholder="Your name">
<p id="nameError" class="error"></p>
</div>
<form>

Step 2 - Add the CSS

Example

Formatted code

<style> input {
  padding: 8px;
  width: 260px;
  margin-bottom: 4px;
} .error {
color: red;
margin: 0;
} .ok {
color: green;
margin: 0;
} .field {
margin-bottom: 12px;
}
</style>

Live preview

Step 3 - Add JavaScript

You must create an object for each field.

Example

// Create an Object for each Field
const form = document.getElementById("signupForm");
const nameInput = document.getElementById("name");
const emailInput = document.getElementById("email");
const passInput = document.getElementById("password");
const confirmInput = document.getElementById("confirm");
const nameError = document.getElementById("nameError");
const emailError = document.getElementById("emailError");
const passError = document.getElementById("passwordError");
const confirmError = document.getElementById("confirmError");
const result = document.getElementById("result");

You need a function to diplay errors.

Example

// Function to Display Error
function showError(el, message) {
 el.innerHTML = message;
}

You need a function to clear the error field.

Example

// Function to Clear the Error
function clearError(el) {
 el.innerHTML = "";
}

You need a function to validate the form.

Example

// Function to Validate Form
function validateForm() {
 return false;
}

You need the code to validate the form.

To validate the form, you must stop the page from reloading.

// Prevent Default Reloading
form.addEventListener("submit", function (event) {
 event.preventDefault();
 // Clear Result
 result.innerHTML = "";
 // Validate Form
 if (validateForm()) {
 result.innerHTML = "Form is valid!";
 result.className = "ok";
 } else {
 result.innerHTML = "Please fix the errors.";
 result.className = "error";
}
});

Step 4 - Validate Fields

Create one function per field.

Validate Name

// Function to Validate Name function validateName() {
let value = nameInput.value.trim();
if (value.length < 2) {
  showError(nameError, "Name must be at least 2 characters.");
  return false;
}
clearError(nameError);
return true;
}
// Function to Validate Form function validateForm() {
let okName = validateName();
return okName;
}

Validate Email

// Function to Validate Email function validateEmail() {
let value = emailInput.value.trim();
if (!(/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value))) {
  showError(emailError, "Enter a valid email address.");
  return false;
}
clearError(emailError);
return true;
}
// Function to Validate Form function validateForm() {
let okName = validateName();
let okEmail = validateEmail();
return okName && okEmail;
}

Validate Password

// Function to Validate Password function validatePassword() {
let value = passInput.value;
if (value.length < 8) {
  showError(passError, "Password must be at least 8 characters.");
  return false;
}
clearError(passError);
return true;
}
// Function to Validate Form function validateForm() {
let okName = validateName();
let okEmail = validateEmail();
let okPass = validatePassword();
return okName && okEmail && okPass;
}

Validate Confirm

// Function to Validate Confirm function validateConfirm() {
let pass = passInput.value;
let confirm = confirmInput.value;
if (confirm === "") {
  showError(confirmError, "Please confirm your password.");
  return false;
}
if (confirm !== pass) {
  showError(confirmError, "Passwords do not match.");
  return false;
}
clearError(confirmError);
return true;
}
// Function to Validate Form function validateForm() {
let okName = validateName();
let okEmail = validateEmail();
let okPass = validatePassword();
let okConfirm = validateConfirm();
return okName && okEmail && okPass && okConfirm;
}

Form Validation (Finished)

This example shows the finished project.

The CSS

<style>
input {
 padding: 8px;
 width: 260px;
 margin-bottom: 4px;
}
.error {
 color: red;
 margin: 0;
}
.ok {
 color: green;
 margin: 0;
}
.field {
 margin-bottom: 12px;
}
</style>

The HTML

<!DOCTYPE html>
<html>
<style>
... CSS goes here
</style>
<body>
<h2>Sign Up</h2>
<form id="signupForm">
<div class="field">
 <label>Name:</label><br>
 <input id="name" type="text" placeholder="Your name">
 <p id="nameError" class="error"></p>
</div>
<div class="field">
 <label>Email:</label><br>
 <input id="email" type="text" placeholder="name@example.com">
 <p id="emailError" class="error"></p>
</div>
<div class="field">
 <label>Password:</label><br>
 <input id="password" type="password" placeholder="Min 8 characters">
 <p id="passwordError" class="error"></p>
</div>
<div class="field">
 <label>Confirm Password:</label><br>
 <input id="confirm" type="password" placeholder="Repeat password">
 <p id="confirmError" class="error"></p>
</div>
<p><button type="submit">Create Account</button></p>
</form>
<p id="result"></p>
<script>
// JavaScript goes here
</script>
</body>
</html>

The JavaScript

// Create an Object for each Field
const form = document.getElementById("signupForm");
const nameInput = document.getElementById("name");
const emailInput = document.getElementById("email");
const passInput = document.getElementById("password");
const confirmInput = document.getElementById("confirm");
const nameError = document.getElementById("nameError");
const emailError = document.getElementById("emailError");
const passError = document.getElementById("passwordError");
const confirmError = document.getElementById("confirmError");
const result = document.getElementById("result");
// Function to Display Error function showError(el, message) { el.innerHTML = message;
}
// Function to Clear Error function clearError(el) { el.innerHTML = "";
}
// Function to Validate Name function validateName() {
let value = nameInput.value.trim();
if (value.length < 2) {
  showError(nameError, "Name must be at least 2 characters.");
  return false;
}
clearError(nameError);
return true;
}
// Function to Validate Email function validateEmail() {
let value = emailInput.value.trim();
if (!(/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value))) {
  showError(emailError, "Enter a valid email address.");
  return false;
}
clearError(emailError);
return true;
}
// Function to Validate Password function validatePassword() {
let value = passInput.value;
if (value.length < 8) {
  showError(passError, "Password must be at least 8 characters.");
  return false;
}
clearError(passError);
return true;
}
// Function to Validate Confirm function validateConfirm() {
let pass = passInput.value;
let confirm = confirmInput.value;
if (confirm === "") {
  showError(confirmError, "Please confirm your password.");
  return false;
}
if (confirm !== pass) {
  showError(confirmError, "Passwords do not match.");
  return false;
}
clearError(confirmError);
return true;
}
// Function to Validate Form function validateForm() {
let okName = validateName();
let okEmail = validateEmail();
let okPass = validatePassword();
let okConfirm = validateConfirm();
return okName && okEmail && okPass && okConfirm;
}
// Prevent Default Reloading form.addEventListener("submit", function (event) { event.preventDefault(); // Clear Result result.innerHTML = ""; // Validate Form
if (validateForm()) {
  result.innerHTML = "Form is valid!";
  result.className = "ok";
} else {
result.innerHTML = "Please fix the errors.";
result.className = "error";
}
});

Common Mistakes

Forgetting event.preventDefault()
Not trimming the input values
Using innerHTML with user input (use text only for messages)

Bonus Challenges (Level Up)

Add password strength indicator (Weak / Medium / Strong)
Disable the submit button until everything is valid
Show/hide password button

JavaScript Debugging Async

ECMAScript 2022

Loading lesson path

JavaScript•Debugging, Projects, and Reference

Project - Form Validation

Flash cards

Review the key moves

1/4

Core idea

What is the main idea behind Project - Form Validation?

Lesson checks

Practice each idea before moving on

Short Mimo-style checks built from this lesson's code, terms, and sequence.

1Quick choice

Which statement best captures the main point of this lesson?

2Fill blank

Complete the missing token from the example code.

<___ id="signupForm">

3Order

Put the learning moves in the order that makes the concept easiest to apply.

Step 1 - Create the HTML

What You Will Learn

Project - Form Validation

In this project you will build a form with validation.

The form will show error messages under each input field, and it will not submit until everything is valid.

What You Will Learn

How to validate form fields with JavaScript
How to prevent a form from submitting
How to show error messages under inputs
How to check email and password rules

Step 1 - Create the HTML

Create a form with four fields and an error message under each field.

<form id="signupForm">
<div class="field">
<label>Name:</label><br>
<input id="name" type="text" placeholder="Your name">
<p id="nameError" class="error"></p>
</div>
<form>

Step 2 - Add the CSS

Example

Formatted code

<style> input {
  padding: 8px;
  width: 260px;
  margin-bottom: 4px;
} .error {
color: red;
margin: 0;
} .ok {
color: green;
margin: 0;
} .field {
margin-bottom: 12px;
}
</style>

Live preview

Step 3 - Add JavaScript

You must create an object for each field.

Example

// Create an Object for each Field
const form = document.getElementById("signupForm");
const nameInput = document.getElementById("name");
const emailInput = document.getElementById("email");
const passInput = document.getElementById("password");
const confirmInput = document.getElementById("confirm");
const nameError = document.getElementById("nameError");
const emailError = document.getElementById("emailError");
const passError = document.getElementById("passwordError");
const confirmError = document.getElementById("confirmError");
const result = document.getElementById("result");

You need a function to diplay errors.

Example

// Function to Display Error
function showError(el, message) {
 el.innerHTML = message;
}

You need a function to clear the error field.

Example

// Function to Clear the Error
function clearError(el) {
 el.innerHTML = "";
}

You need a function to validate the form.

Example

// Function to Validate Form
function validateForm() {
 return false;
}

You need the code to validate the form.

To validate the form, you must stop the page from reloading.

// Prevent Default Reloading
form.addEventListener("submit", function (event) {
 event.preventDefault();
 // Clear Result
 result.innerHTML = "";
 // Validate Form
 if (validateForm()) {
 result.innerHTML = "Form is valid!";
 result.className = "ok";
 } else {
 result.innerHTML = "Please fix the errors.";
 result.className = "error";
}
});

Step 4 - Validate Fields

Create one function per field.

Validate Name

// Function to Validate Name function validateName() {
let value = nameInput.value.trim();
if (value.length < 2) {
  showError(nameError, "Name must be at least 2 characters.");
  return false;
}
clearError(nameError);
return true;
}
// Function to Validate Form function validateForm() {
let okName = validateName();
return okName;
}

Validate Email

// Function to Validate Email function validateEmail() {
let value = emailInput.value.trim();
if (!(/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value))) {
  showError(emailError, "Enter a valid email address.");
  return false;
}
clearError(emailError);
return true;
}
// Function to Validate Form function validateForm() {
let okName = validateName();
let okEmail = validateEmail();
return okName && okEmail;
}

Validate Password

// Function to Validate Password function validatePassword() {
let value = passInput.value;
if (value.length < 8) {
  showError(passError, "Password must be at least 8 characters.");
  return false;
}
clearError(passError);
return true;
}
// Function to Validate Form function validateForm() {
let okName = validateName();
let okEmail = validateEmail();
let okPass = validatePassword();
return okName && okEmail && okPass;
}

Validate Confirm

// Function to Validate Confirm function validateConfirm() {
let pass = passInput.value;
let confirm = confirmInput.value;
if (confirm === "") {
  showError(confirmError, "Please confirm your password.");
  return false;
}
if (confirm !== pass) {
  showError(confirmError, "Passwords do not match.");
  return false;
}
clearError(confirmError);
return true;
}
// Function to Validate Form function validateForm() {
let okName = validateName();
let okEmail = validateEmail();
let okPass = validatePassword();
let okConfirm = validateConfirm();
return okName && okEmail && okPass && okConfirm;
}

Form Validation (Finished)

This example shows the finished project.

The CSS

<style>
input {
 padding: 8px;
 width: 260px;
 margin-bottom: 4px;
}
.error {
 color: red;
 margin: 0;
}
.ok {
 color: green;
 margin: 0;
}
.field {
 margin-bottom: 12px;
}
</style>

The HTML

<!DOCTYPE html>
<html>
<style>
... CSS goes here
</style>
<body>
<h2>Sign Up</h2>
<form id="signupForm">
<div class="field">
 <label>Name:</label><br>
 <input id="name" type="text" placeholder="Your name">
 <p id="nameError" class="error"></p>
</div>
<div class="field">
 <label>Email:</label><br>
 <input id="email" type="text" placeholder="name@example.com">
 <p id="emailError" class="error"></p>
</div>
<div class="field">
 <label>Password:</label><br>
 <input id="password" type="password" placeholder="Min 8 characters">
 <p id="passwordError" class="error"></p>
</div>
<div class="field">
 <label>Confirm Password:</label><br>
 <input id="confirm" type="password" placeholder="Repeat password">
 <p id="confirmError" class="error"></p>
</div>
<p><button type="submit">Create Account</button></p>
</form>
<p id="result"></p>
<script>
// JavaScript goes here
</script>
</body>
</html>

The JavaScript

// Create an Object for each Field
const form = document.getElementById("signupForm");
const nameInput = document.getElementById("name");
const emailInput = document.getElementById("email");
const passInput = document.getElementById("password");
const confirmInput = document.getElementById("confirm");
const nameError = document.getElementById("nameError");
const emailError = document.getElementById("emailError");
const passError = document.getElementById("passwordError");
const confirmError = document.getElementById("confirmError");
const result = document.getElementById("result");
// Function to Display Error function showError(el, message) { el.innerHTML = message;
}
// Function to Clear Error function clearError(el) { el.innerHTML = "";
}
// Function to Validate Name function validateName() {
let value = nameInput.value.trim();
if (value.length < 2) {
  showError(nameError, "Name must be at least 2 characters.");
  return false;
}
clearError(nameError);
return true;
}
// Function to Validate Email function validateEmail() {
let value = emailInput.value.trim();
if (!(/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value))) {
  showError(emailError, "Enter a valid email address.");
  return false;
}
clearError(emailError);
return true;
}
// Function to Validate Password function validatePassword() {
let value = passInput.value;
if (value.length < 8) {
  showError(passError, "Password must be at least 8 characters.");
  return false;
}
clearError(passError);
return true;
}
// Function to Validate Confirm function validateConfirm() {
let pass = passInput.value;
let confirm = confirmInput.value;
if (confirm === "") {
  showError(confirmError, "Please confirm your password.");
  return false;
}
if (confirm !== pass) {
  showError(confirmError, "Passwords do not match.");
  return false;
}
clearError(confirmError);
return true;
}
// Function to Validate Form function validateForm() {
let okName = validateName();
let okEmail = validateEmail();
let okPass = validatePassword();
let okConfirm = validateConfirm();
return okName && okEmail && okPass && okConfirm;
}
// Prevent Default Reloading form.addEventListener("submit", function (event) { event.preventDefault(); // Clear Result result.innerHTML = ""; // Validate Form
if (validateForm()) {
  result.innerHTML = "Form is valid!";
  result.className = "ok";
} else {
result.innerHTML = "Please fix the errors.";
result.className = "error";
}
});

Common Mistakes

Forgetting event.preventDefault()
Not trimming the input values
Using innerHTML with user input (use text only for messages)

Bonus Challenges (Level Up)

Add password strength indicator (Weak / Medium / Strong)
Disable the submit button until everything is valid
Show/hide password button

JavaScript Debugging Async

ECMAScript 2022