Loading lesson path

Learn/JavaScript/Debugging, Projects, and Reference

JavaScript•Debugging, Projects, and Reference

Project - Form Validation

Concept visual

Project - Form Validation

Pointer walk

two pointers

left=0

right=6

Start at both ends

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

Formula

Step 1 - Create the HTML

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

Example

Formula

< label > Name:</label >< br >

Formula

Step 2 - Add the CSS

Example

<style>

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

</style>

Formula

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.

Example

// 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";
}
});

Formula

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>

Formula

< h2 > Sign Up </h2 >

Formula

< label > Name:</label >< br >

Formula

< label > Email:</label >< br >

Formula

< label > Password:</label >< br >

Formula

< 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)

Exercise 1

Add a rule that the password must contain at least one number.

JavaScript Debugging Async

ECMAScript 2022

Loading lesson path

Learn/JavaScript/Debugging, Projects, and Reference

JavaScript•Debugging, Projects, and Reference

Project - Form Validation

Concept visual

Project - Form Validation

Pointer walk

two pointers

left=0

right=6

Start at both ends

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

Formula

Step 1 - Create the HTML

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

Example

Formula

< label > Name:</label >< br >

Formula

Step 2 - Add the CSS

Example

<style>

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

</style>

Formula

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.

Example

// 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";
}
});

Formula

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>

Formula

< h2 > Sign Up </h2 >

Formula

< label > Name:</label >< br >

Formula

< label > Email:</label >< br >

Formula

< label > Password:</label >< br >

Formula

< label > Confirm Password:</label >< br >

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)

Exercise 1

Add a rule that the password must contain at least one number.

JavaScript Debugging Async

ECMAScript 2022