Roll No:2200271690031
Name: Om Gupta
Experiment-4
AIM- Write programs using HTML and Javascript for validation
of input data.
Code-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Professional Form Validation</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f8f9fa;
margin: 0;
padding: 0;
.container {
max-width: 600px;
margin: 50px auto;
background-color: #fff;
padding: 30px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
border-radius: 8px;
h2 {
text-align: center;
margin-bottom: 30px;
color: #333;
form {
display: flex;
flex-direction: column;
}
label {
margin-top: 10px;
font-weight: bold;
color: #555;
input[type="text"], input[type="email"], input[type="password"], input[type="tel"], textarea {
padding: 12px;
font-size: 1rem;
margin-top: 5px;
border-radius: 4px;
border: 1px solid #ccc;
transition: all 0.3s ease;
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="tel"]:focus,
textarea:focus {
border-color: #007bff;
outline: none;
box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
.error {
color: #e74c3c;
font-size: 0.9rem;
margin-top: 5px;
input[type="submit"] {
background-color: #007bff;
color: white;
border: none;
padding: 15px;
font-size: 1rem;
margin-top: 20px;
cursor: pointer;
border-radius: 4px;
transition: background-color 0.3s ease;
input[type="submit"]:hover {
background-color: #0056b3;
textarea {
resize: vertical;
</style>
</head>
<body>
<div class="container">
<h2>Registration Form</h2>
<form id="registrationForm" onsubmit="return validateForm()">
<label for="name">Full Name:</label>
<input type="text" id="name" name="name">
<div id="nameError" class="error"></div>
<label for="email">Email Address:</label>
<input type="email" id="email" name="email">
<div id="emailError" class="error"></div>
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<div id="passwordError" class="error"></div>
<label for="phone">Phone Number:</label>
<input type="tel" id="phone" name="phone">
<div id="phoneError" class="error"></div>
<label for="address">Address:</label>
<textarea id="address" name="address" rows="4"></textarea>
<div id="addressError" class="error"></div>
<input type="submit" value="Submit">
</form>
</div>
<script>
function validateForm() {
let isValid = true;
// Clear previous error messages
document.getElementById('nameError').textContent = '';
document.getElementById('emailError').textContent = '';
document.getElementById('passwordError').textContent = '';
document.getElementById('phoneError').textContent = '';
document.getElementById('addressError').textContent = '';
// Validate Name (must not be empty and at least 3 characters)
const name = document.getElementById('name').value;
if (name === '') {
document.getElementById('nameError').textContent = 'Full name is required';
isValid = false;
} else if (name.length < 3) {
document.getElementById('nameError').textContent = 'Full name must be at least 3 characters';
isValid = false;
// Validate Email (must match email format)
const email = document.getElementById('email').value;
const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
if (email === '') {
document.getElementById('emailError').textContent = 'Email address is required';
isValid = false;
} else if (!emailPattern.test(email)) {
document.getElementById('emailError').textContent = 'Invalid email format';
isValid = false;
}
// Validate Password (must be at least 8 characters, including one letter and one number)
const password = document.getElementById('password').value;
const passwordPattern = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/;
if (password === '') {
document.getElementById('passwordError').textContent = 'Password is required';
isValid = false;
} else if (!passwordPattern.test(password)) {
document.getElementById('passwordError').textContent = 'Password must be at least 8 characters long and
contain at least one letter and one number';
isValid = false;
// Validate Phone Number (must be a valid 10-digit phone number)
const phone = document.getElementById('phone').value;
const phonePattern = /^[0-9]{10}$/;
if (phone === '') {
document.getElementById('phoneError').textContent = 'Phone number is required';
isValid = false;
else if (!phonePattern.test(phone)) {
document.getElementById('phoneError').textContent = 'Phone number must be 10 digits';
isValid = false;
// Validate Address (must not be empty)
const address = document.getElementById('address').value;
if (address === '') {
document.getElementById('addressError').textContent = 'Address is required';
isValid = false;
return isValid;
</script>
</body>
</html>
Output-
