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

Share

Step 1 - Create the HTML

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

Example

Name:

Step 2 - Add the CSS

Example

input {

  padding: 8px;

  width: 260px;

  margin-bottom: 4px;

}

.error {

  color: red;

  margin: 0;

}

.ok {

  color: green;

  margin: 0;

}

.field {

  margin-bottom: 12px;

}

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";

  }

});

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

input {

  padding: 8px;

  width: 260px;

  margin-bottom: 4px;

}

.error {

  color: red;

  margin: 0;

}

.ok {

  color: green;

  margin: 0;

}

.field {

  margin-bottom: 12px;

}

The HTML

... CSS goes here

## Sign Up

   Name:

   Email:

   Password:

   Confirm Password:

Create Account

// JavaScript goes here

The JavaScript

```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 JavaScript Projects > JavaScript Counter > A counter project with restore and save in localStorage. > JavaScript Event Listener > The counter project using event listener instead of onclick. > JavaScript To-Do List > A do-do list saved in an array in local storage. > JavaScript Modal Popup > A modal popup window that appears on top of the page. > JavaScript Form Validation > An HTML Form with form validation.