<-- HyperText Markup Language-->
<html>
<--to store metadata about a web page-->
<head>
<--to define the title of a document.-->
<title>Form Validation</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.form-container {
background-color: #fff;
padding: 20px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
border-radius: 8px;
width: 300px;
}
h2 {
text-align: center;
}
label {
display: block;
margin-bottom: 5px;
}
input[type="text"],
input[type="email"],
input[type="password"] {
width: 100%;
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
input[type="submit"] {
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #45a049;
}
.error {
color: red;
font-size: 0.9em;
}
</style>
</head>
<body>
<div class="form-container">
<h2>Registration Form</h2>
<form id="registrationForm" onsubmit="return validateForm()">
<!-- Name Field -->
<label for="name">Full Name:</label>
<input type="text" id="name" name="name">
<span id="nameError" class="error"></span>
<!-- Email Field -->
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<span id="emailError" class="error"></span>
<!-- Password Field -->
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<span id="passwordError" class="error"></span>
<!-- Confirm Password Field -->
<label for="confirmPassword">Confirm Password:</label>
<input type="password" id="confirmPassword" name="confirmPassword">
<span id="confirmPasswordError" class="error"></span>
<!-- Submit Button -->
<input type="submit" value="Submit">
</form>
</div>
<script>
function validateForm() {
// Clear previous error messages
document.getElementById('nameError').innerText = '';
document.getElementById('emailError').innerText = '';
document.getElementById('passwordError').innerText = '';
document.getElementById('confirmPasswordError').innerText = '';
let isValid = true;
// Get form values
let name = document.getElementById('name').value;
let email = document.getElementById('email').value;
let password = document.getElementById('password').value;
let confirmPassword = document.getElementById('confirmPassword').value;
// Name Validation: check if empty
if (name === '') {
document.getElementById('nameError').innerText = 'Name is required.';
isValid = false;
}
// Email Validation: check if empty and valid format
let emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
if (email === '') {
document.getElementById('emailError').innerText = 'Email is required.';
isValid = false;
} else if (!emailPattern.test(email)) {
document.getElementById('emailError').innerText = 'Please enter a valid email address.';
isValid = false;
}
// Password Validation: check if empty and length is at least 6 characters
if (password === '') {
document.getElementById('passwordError').innerText = 'Password is required.';
isValid = false;
} else if (password.length < 6) {
document.getElementById('passwordError').innerText = 'Password must be at least 6 characters long.';
isValid = false;
}
// Confirm Password Validation: check if it matches the password
if (confirmPassword === '') {
document.getElementById('confirmPasswordError').innerText = 'Please confirm your password.';
isValid = false;
} else if (confirmPassword !== password) {
document.getElementById('confirmPasswordError').innerText = 'Passwords do not match.';
isValid = false;
}
return isValid; // Return false to prevent form submission if validation fails
}
</script>
</body>
</html>
