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