Create a form validation system is essential to ensure that users input the correct data and prevent invalid or malicious entries. I will walk you through how I built a responsive form validation page using HTML, CSS, and JavaScript. I will also explain the code in detail and add more practical functionality to enhance the user experience.
Project Overview
I created a simple yet effective sign-up form with validation features to ensure that users enter valid information. The form includes fields for name, email, password, and confirmation password, with real-time feedback and error messages.
- HTML: For the structure of the form.
- CSS: For responsive design and styling.
- JavaScript: For validation and real-time error handling.
HTML Structure
First, I created the basic form layout using HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Validation</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<form id="signupForm">
<h2>Sign Up</h2>
<div class="form-group">
<label for="name">Name</label>
<input type="text" id="name" placeholder="Enter your name">
<small class="error-message"></small>
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" id="email" placeholder="Enter your email">
<small class="error-message"></small>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" id="password" placeholder="Enter password">
<small class="error-message"></small>
</div>
<div class="form-group">
<label for="confirmPassword">Confirm Password</label>
<input type="password" id="confirmPassword" placeholder="Confirm password">
<small class="error-message"></small>
</div>
<button type="submit">Register</button>
</form>
</div>
<script src="script.js"></script>
</body>
</html>Styling with CSS
To make the form look visually appealing and responsive, I used the following CSS code:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f4f4f4;
}
.container {
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 400px;
}
h2 {
text-align: center;
margin-bottom: 20px;
}
.form-group {
margin-bottom: 15px;
}
label {
display: block;
font-weight: bold;
}
input {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
.error-message {
color: red;
font-size: 12px;
}
button {
width: 100%;
padding: 10px;
background: #28a745;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
button:hover {
background: #218838;
}JavaScript for Validation
Finally, I implemented JavaScript validation to ensure user input is correct before submission.
document.getElementById("signupForm").addEventListener("submit", function(event) {
event.preventDefault();
validateForm();
});
function validateForm() {
let name = document.getElementById("name");
let email = document.getElementById("email");
let password = document.getElementById("password");
let confirmPassword = document.getElementById("confirmPassword");
validateField(name, name.value.trim() !== "", "Name cannot be empty");
validateField(email, isValidEmail(email.value), "Enter a valid email");
validateField(password, password.value.length >= 6, "Password must be at least 6 characters");
validateField(confirmPassword, confirmPassword.value === password.value, "Passwords do not match");
}
function validateField(input, condition, message) {
let errorMessage = input.nextElementSibling;
if (!condition) {
errorMessage.textContent = message;
input.style.borderColor = "red";
} else {
errorMessage.textContent = "";
input.style.borderColor = "green";
}
}
function isValidEmail(email) {
return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
}Additional Features Added
To enhance the functionality further, I made the following improvements:
- Real-time validation: The validation updates as the user types.
- Password strength indicator: The password field now provides feedback on password strength.
- Success message: Displays a confirmation message upon successful form submission.
Success Message Feature
function showSuccessMessage() {
let form = document.getElementById("signupForm");
form.innerHTML = "<h3>Registration Successful! 🎉</h3><p>Welcome aboard.</p>";
}This function replaces the form with a success message when all inputs are valid.
Conclusion
This project helped me understand the importance of user input validation and how it enhances the security and user experience of web applications. By implementing real-time validation, error handling, and responsive design, I was able to create a functional and user-friendly form.