Learn how to validate a form using JavaScript to ensure accurate and secure user input. This tutorial covers the step-by-step process of implementing form validation using JavaScript, enabling you to create robust and error-free web forms.
To validate a form using JavaScript, you can use the following steps:
Step 1: HTML Markup Create an HTML form and add the necessary input fields along with a submit button. You can also add an <span> element to display error messages.
<form id="myForm">
<input type="text" id="name" placeholder="Name">
<input type="email" id="email" placeholder="Email">
<input type="password" id="password" placeholder="Password">
<span id="error"></span>
<button type="submit">Submit</button>
</form>
Step 2: JavaScript Validation Add JavaScript code to validate the form when the submit button is clicked. You can use the addEventListener method to attach an event listener to the form’s submit event.
document.getElementById("myForm").addEventListener("submit", function(event) {
event.preventDefault(); // Prevent the form from submitting
// Fetch input field values
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
var password = document.getElementById("password").value;
// Validate the form
if (name === "") {
showError("Name is required");
} else if (email === "") {
showError("Email is required");
} else if (!isValidEmail(email)) {
showError("Invalid email format");
} else if (password === "") {
showError("Password is required");
} else if (password.length < 8) {
showError("Password must be at least 8 characters");
} else {
// Form is valid, submit it
document.getElementById("error").textContent = "";
alert("Form submitted successfully");
// Add code to submit the form to a server or perform other actions here
}
});
// Function to display error message
function showError(message) {
document.getElementById("error").textContent = message;
}
// Function to validate email format
function isValidEmail(email) {
var emailRegex = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
return emailRegex.test(email);
}
Validate form using JavaScript
Here’s a complete example of form validation using JavaScript:
<!DOCTYPE html>
<html>
<head>
<title>Form Validation</title>
<script>
function validateForm() {
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
var password = document.getElementById("password").value;
// Validate name
if (name === "") {
alert("Name is required");
return false;
}
// Validate email
if (email === "") {
alert("Email is required");
return false;
}
// Validate password
if (password === "") {
alert("Password is required");
return false;
} else if (password.length < 8) {
alert("Password must be at least 8 characters");
return false;
}
// Form is valid, submit it
alert("Form submitted successfully");
return true;
}
</script>
</head>
<body>
<form id="myForm" onsubmit="return validateForm()">
<input type="text" id="name" placeholder="Name">
<input type="email" id="email" placeholder="Email">
<input type="password" id="password" placeholder="Password">
<button type="submit">Submit</button>
</form>
</body>
</html>
Output:
Comment if you have any doubts or suggestions on this Js HTML code.
Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.
OS: Windows 10
Code: HTML 5 Version