SOURCE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>User Registration Form</title>
<style>
body {
font-family: Arial, sans-serif;
background: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.form-container {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 400px;
}
.form-container h2 {
margin-bottom: 20px;
text-align: center;
}
.form-group {
margin-bottom: 15px;
}
.form-group label {
display: block;
margin-bottom: 5px;
}
.form-group input {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
.form-group .error {
color: red;
font-size: 0.9rem;
margin-top: 5px;
}
.submit-btn {
width: 100%;
padding: 10px;
background: #28a745;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 1rem;
}
.submit-btn:hover {
background: #218838;
}
</style>
</head>
<body>
<div class="form-container">
<h2>Register</h2>
<form id="registrationForm">
<div class="form-group">
<label for="name">Name</label>
<input type="text" id="name" required>
<div class="error" id="nameError"></div>
</div>
<div class="form-group">
<label for="phone">Phone Number</label>
<input type="text" id="phone" required>
<div class="error" id="phoneError"></div>
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" id="email" required>
<div class="error" id="emailError"></div>
</div>
<div class="form-group">
<label for="pincode">Pin Code</label>
<input type="text" id="pincode" required>
<div class="error" id="pincodeError"></div>
</div>
<div class="form-group">
<label for="dob">Date of Birth</label>
<input type="date" id="dob" required>
<div class="error" id="dobError"></div>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" id="password" required>
<div class="error" id="passwordError"></div>
</div>
<div class="form-group">
<label for="confirmPassword">Confirm Password</label>
<input type="password" id="confirmPassword" required>
<div class="error" id="confirmPasswordError"></div>
</div>
<button type="submit" class="submit-btn">Register</button>
</form>
</div>
<script>
document.getElementById("registrationForm").addEventListener("submit", function (e) {
e.preventDefault();
// Clear previous errors
document.querySelectorAll(".error").forEach((error) => (error.textContent = ""));
// Get form values
const name = document.getElementById("name").value.trim();
const phone = document.getElementById("phone").value.trim();
const email = document.getElementById("email").value.trim();
const pincode = document.getElementById("pincode").value.trim();
const dob = document.getElementById("dob").value;
const password = document.getElementById("password").value;
const confirmPassword = document.getElementById("confirmPassword").value;
let isValid = true;
// Validate name
if (!name) {
isValid = false;
document.getElementById("nameError").textContent = "Name is required.";
}
// Validate phone number (10 digits)
if (!/^\d{10}$/.test(phone)) {
isValid = false;
document.getElementById("phoneError").textContent = "Enter a valid 10-digit phone
number.";
}
// Validate email
if (!/\S+@\S+\.\S+/.test(email)) {
isValid = false;
document.getElementById("emailError").textContent = "Enter a valid email address.";
}
// Validate pin code (6 digits)
if (!/^\d{6}$/.test(pincode)) {
isValid = false;
document.getElementById("pincodeError").textContent = "Enter a valid 6-digit pin
code.";
}
// Validate date of birth
if (!dob) {
isValid = false;
document.getElementById("dobError").textContent = "Date of birth is required.";
}
// Validate password (at least 6 characters)
if (password.length < 6) {
isValid = false;
document.getElementById("passwordError").textContent =
"Password must be at least 6 characters long.";
}
// Validate confirm password
if (password !== confirmPassword) {
isValid = false;
document.getElementById("confirmPasswordError").textContent =
"Passwords do not match.";
}
// Submit if valid
if (isValid) {
alert("Registration successful!");
this.reset(); // Clear the form
}
});
</script>
</body>
</html>
