EX NO:2
DEVELOP A WEBSITE WITH CLIENT SIDE FORM VALIDATION
DATE:25.08.25
OBJECTIVE:
To develop a website where the user can register their details using a form. The client-side
scripting should validate the details entered by the user such as Email ID, phone number, pin
code, password strength, etc. Some mandatory fields must not be left empty
PROCEDURE:
1. Form Layout Design
o The form is divided into 3 logical blocks:
Personal Information Block (HTML validation)
Concert Details Block (JavaScript validation)
Security & Confirmation Block (Regex validation)
o A white background with black text theme is applied for printer-friendly
output.
2. HTML Validation (Block 1)
o Fields like Full Name, Email, DOB use built-in HTML attributes such as
required, minlength, maxlength, type="email", pattern.
o The browser automatically prevents incorrect input.
3. JavaScript Validation (Block 2)
o Custom validation is added for fields like Artist Selection and Ticket Amount.
o Ensures logical checks (e.g., amount must be greater than zero, an artist must
be selected).
4. Regex Validation (Block 3)
o Regex is used for Phone Number, PIN Code, Password Strength, Confirm
Password.
o Prevents submission until regex patterns are matched.
5. Agreement Checkbox
o A terms and conditions checkbox is included right before submission, which
must be checked to enable submission.
6. Error Handling & Feedback
o Proper error messages are displayed near each field.
o The form will not submit if any validation fails.
SOURCE CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Concert Entry Form</title>
<style>
body {
font-family: Arial, sans-serif;
background: #fff;
color: #000;
margin: 0;
padding: 20px;
}
h2 { margin-bottom: 8px; }
form { display: grid; gap: 20px; }
fieldset {
border: 2px solid #555;
border-radius: 10px;
padding: 15px;
}
legend {
font-weight: bold;
}
label {
display: block;
margin-top: 10px;
font-weight: bold;
}
input, select {
width: 95%;
padding: 8px;
margin-top: 5px;
border: 1px solid #aaa;
border-radius: 6px;
}
.error {
color: red;
font-size: 0.9em;
}
.submit-block {
display: flex;
justify-content: space-between;
align-items: center;
}
.agree {
display: inline-flex;
align-items: center;
gap: 8px;
}
button {
padding: 10px 20px;
border: none;
background: purple;
color: white;
font-weight: bold;
border-radius: 6px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>Concert Entry Form</h1>
<form id="concertForm">
<!-- BLOCK 1: Personal Information (HTML VALIDATION) -->
<fieldset>
<legend>Personal Information</legend>
<label for="name">Full Name (Ex: John Doe)</label>
<input type="text" id="name" name="name" minlength="4" pattern="[A-Za-z ]+"
required>
<label for="email">Email (Ex: john@example.com)</label>
<input type="email" id="email" name="email" required>
<label for="dob">Date of Birth (Must be 18+)</label>
<input type="date" id="dob" name="dob" required>
</fieldset>
<!-- BLOCK 2: Concert Details (JS VALIDATION) -->
<fieldset>
<legend>Concert Details</legend>
<label for="artist">Select Artist</label>
<select id="artist" required>
<option value="">-- Choose Artist --</option>
<option>Arijit Singh</option>
<option>Shreya Ghoshal</option>
<option>Anirudh</option>
<option>A. R. Rahman</option>
</select>
<div id="artistError" class="error"></div>
<label for="amount">Ticket Amount (₹)</label>
<input type="number" id="amount" min="1" required>
<div id="amountError" class="error"></div>
</fieldset>
<!-- BLOCK 3: Security & Confirmation (REGEX VALIDATION) -->
<fieldset>
<legend>Security & Confirmation</legend>
<label for="phone">Phone Number (Ex: +91-9876543210)</label>
<input type="text" id="phone" required>
<div id="phoneError" class="error"></div>
<label for="pincode">PIN Code (6 digits)</label>
<input type="text" id="pincode" required>
<div id="pinError" class="error"></div>
<label for="password">Password</label>
<input type="password" id="password" required>
<label for="cpassword">Confirm Password</label>
<input type="password" id="cpassword" required>
<div id="passError" class="error"></div>
</fieldset>
<!-- Submit Block -->
<div class="submit-block">
<label class="agree">
<input type="checkbox" id="terms" required>
<span>I agree to the terms & conditions</span>
</label>
<button type="submit">Submit</button>
</div>
</form>
<script>
document.getElementById("concertForm").addEventListener("submit", function(e) {
let valid = true;
// Block 2: JS Validation
const artist = document.getElementById("artist").value;
const amount = document.getElementById("amount").value;
document.getElementById("artistError").textContent = "";
document.getElementById("amountError").textContent = "";
if (artist === "") {
document.getElementById("artistError").textContent = "Please select an artist.";
valid = false;
}
if (amount <= 0) {
document.getElementById("amountError").textContent = "Enter a valid ticket amount.";
valid = false;
}
// Block 3: Regex Validation
const phone = document.getElementById("phone").value;
const pin = document.getElementById("pincode").value;
const pass = document.getElementById("password").value;
const cpass = document.getElementById("cpassword").value;
const phoneRegex = /^(\+91[-]?)?[0-9]{10}$/;
const pinRegex = /^[0-9]{6}$/;
const passRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-
z\d@$!%*?&]{8,}$/;
document.getElementById("phoneError").textContent = "";
document.getElementById("pinError").textContent = "";
document.getElementById("passError").textContent = "";
if (!phoneRegex.test(phone)) {
document.getElementById("phoneError").textContent = "Invalid phone number.";
valid = false;
}
if (!pinRegex.test(pin)) {
document.getElementById("pinError").textContent = "PIN must be 6 digits.";
valid = false;
}
if (!passRegex.test(pass)) {
document.getElementById("passError").textContent = "Password must include
uppercase, lowercase, number, and special char.";
valid = false;
} else if (pass !== cpass) {
document.getElementById("passError").textContent = "Passwords do not match.";
valid = false;
}
if (!valid) e.preventDefault();
});
</script>
</body>
</html>
OUTPUT:
