Scribd
Upload
7 views5 pages

CSS Practical No 12

This document provides a complete HTML code for a form that validates user input for name, age, date of birth, email, and password using regular expressions. It includes error messages that display when the input does not meet the specified criteria. The JavaScript function 'validateForm' checks the validity of each input field before allowing form submission.

Uploaded by

faizanmulla1202
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
7 views5 pages

CSS Practical No 12

This document provides a complete HTML code for a form that validates user input for name, age, date of birth, email, and password using regular expressions. It includes error messages that display when the input does not meet the specified criteria. The JavaScript function 'validateForm' checks the validity of each input field before allowing form submission.

Uploaded by

faizanmulla1202
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

Practical No 12

Q.1) Program to validate name, age, date of birth, email and


password using regular expression.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Validation with Regular Expressions</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 600px;
margin: auto;
padding: 20px;
}
form {
display: flex;
flex-direction: column;
}
label {
margin-top: 10px;
}
input {
padding: 10px;
margin-top: 5px;
font-size: 16px;
}
.error {
color: red;
font-size: 14px;
display: none;
}
button {
padding: 10px;
margin-top: 20px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
</style>
</head>
<body>

<h1>Form Validation using Regular Expressions</h1>


<form id="validationForm" onsubmit="return validateForm()">
<!-- Name Input -->
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Enter your name">
<span class="error" id="nameError">Name must contain only letters and spaces.</span>
<!-- Age Input -->
<label for="age">Age:</label>
<input type="text" id="age" name="age" placeholder="Enter your age">
<span class="error" id="ageError">Age must be a number between 1 and 100.</span>
<!-- Date of Birth Input -->
<label for="dob">Date of Birth (YYYY-MM-DD):</label>
<input type="text" id="dob" name="dob" placeholder="Enter your date of birth">
<span class="error" id="dobError">Please enter a valid date in YYYY-MM-DD format.</span>
<!-- Email Input -->
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Enter your email">
<span class="error" id="emailError">Please enter a valid email address.</span>

<!-- Password Input -->


<label for="password">Password:</label>
<input type="password" id="password" name="password" placeholder="Enter your password">
<span class="error" id="passwordError">Password must be at least 6 characters, include a letter
and a number.</span>

<!-- Submit Button -->


<button type="submit">Submit</button>
</form>

<script>
function validateForm() {
// Clear previous errors
document.querySelectorAll('.error').forEach(function(error) {
error.style.display = 'none';
});

let isValid = true;

// Validate Name (only letters and spaces)


let name = document.getElementById("name").value;
let namePattern = /^[a-zA-Z\s]+$/;
if (!namePattern.test(name)) {
document.getElementById("nameError").style.display = 'inline';
isValid = false;
}
let age = document.getElementById("age").value;
let agePattern = /^(?:[1-9]|[1-9][0-9]|100)$/;
if (!agePattern.test(age)) {
document.getElementById("ageError").style.display = 'inline';
isValid = false;
}
let dob = document.getElementById("dob").value;
let dobPattern = /^\d{4}-\d{2}-\d{2}$/;
if (!dobPattern.test(dob)) {
document.getElementById("dobError").style.display = 'inline';
isValid = false;
}
let email = document.getElementById("email").value;
let emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
if (!emailPattern.test(email)) {
document.getElementById("emailError").style.display = 'inline';
isValid = false;
}
let password = document.getElementById("password").value;
let passwordPattern = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,}$/;
if (!passwordPattern.test(password)) {
document.getElementById("passwordError").style.display = 'inline';
isValid = false;
}

return isValid; // Prevent form submission if validation fails


}
</script>

</body>
</html>
Output:

You might also like