How to Create a Form Validation in JavaScript, HTML and CSS
The script validates the name, email, and password fields, providing real-time feedback to users and preventing the submission of incomplete or incorrect data.
Project Source Code:
<!DOCTYPE html>
<html>
<head>
<title>Form Validation</title>
<style>
*{ box-sizing: border-box; margin: 0; padding: 0; }
#myForm{ display: flex; flex-direction: column;
max-width: 400px; padding: 20px;
margin: 20px auto; border-radius: 5px;
font-family: 'Segoe UI', Verdana, sans-serif;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
label{ font-weight: bold; margin-bottom: 5px; color: #555; }
input[type="text"],
input[type="email"],
input[type="password"]{ padding: 10px; margin-bottom: 10px;
border: none; border-radius: 3px;
background-color: #f2f2f2;
}
input[type="submit"]{ padding: 10px 20px; margin-top: 10px;
border: none; border-radius: 3px;
background-color: goldenrod;
color: #fff; cursor: pointer;
transition: all 0.3s ease;
}
</style>
</head>
<body>
<form id="myForm" onsubmit="return validateForm()">
<label>Name:</label>
<input type="text" id="name" name="name">
<label>Email:</label>
<input type="text" id="email" name="email">
<label>Password:</label>
<input type="password" id="password" name="password">
<input type="submit" name="submit" value="Submit">
</form>
<script>
function validateForm(){
// Get the values of the input fields
const name = document.getElementById("name").value;
const email = document.getElementById("email").value;
const password = document.getElementById("password").value;
// Check if the name field is empty
if(name === ""){
alert("Name must be filled out");
return false;
}
// Check if the email field is empty or invalid
if(email === ""){
alert("Email must be filled out");
return false;
}
else if(!validateEmail(email)){
alert("Invalid email format");
return false;
}
// Check if the password field is empty or too short
if(password === ""){
alert("Password must be filled out");
return false;
}
else if(password.length < 8){
alert("Password must be at least 8 character");
return false;
}
// If all input fields pass validation,
// return true to allow the form to be submitted
return true;
}
// Helper function to validate email format
function validateEmail(email){
const re = /\S+@\S+\.\S+/;
return re.test(email);
}
</script>
</body>
</html>
Code Explanation:
JavaScript Validation:
The JavaScript script handles the form validation. It consists of a function called validateForm(), which is triggered when the form is submitted. Here's an overview of the validation steps performed:
1 - Retrieving Input Values: The function retrieves the values entered in the name, email, and password fields using the getElementById() method.
2 - Name Field Validation: It checks if the name field is empty. If it is, an alert message is displayed, and the function returns false, preventing form submission.
3 - Email Field Validation: It checks if the email field is empty or has an invalid format. If either condition is true, appropriate alert messages are displayed, and the function returns false.
4 - Password Field Validation: It checks if the password field is empty or shorter than eight characters. Similar to the previous validations, alert messages are displayed accordingly, and the function returns false.
5 - Successful Validation: If all input fields pass validation, the function returns true, allowing the form to be submitted.
OUTPUT:
