Experiment - 6
Q. Js Validation for Name and Password
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Online Bookstore - Registration Validation</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}
.container {
display: flex;
flex-direction: column;
height: 100vh;
}
.top-frame {
background-color: #4CAF50;
color: white;
padding: 10px;
text-align: center;
height: 15%;
}
.top-frame img {
height: 50px;
vertical-align: middle;
}
.top-frame a {
color: white;
margin: 0 15px;
text-decoration: none;
font-weight: bold;
}
.top-frame a:hover {
text-decoration: underline;
}
.main-frame {
display: flex;
flex: 1;
}
.left-frame {
background-color: #f1f1f1;
width: 20%;
padding: 10px;
}
.left-frame a {
display: block;
padding: 10px;
text-decoration: none;
color: #333;
margin-bottom: 5px;
}
.left-frame a:hover {
background-color: #ddd;
}
.right-frame {
flex: 1;
padding: 20px;
background-color: #fff;
}
.registration-form {
max-width: 400px;
margin: 0 auto;
}
.registration-form h2 {
text-align: center;
}
.registration-form label {
display: block;
margin: 10px 0 5px;
}
.registration-form input[type="text"],
.registration-form input[type="password"] {
width: 100%;
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
.registration-form input[type="submit"],
.registration-form input[type="reset"] {
background-color: #4CAF50;
color: white;
padding: 10px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
margin-right: 10px;
}
.registration-form input[type="submit"]:hover,
.registration-form input[type="reset"]:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<div class="container">
<div class="top-frame">
<img src="[Link]" alt="Logo"> <!-- Replace with actual logo
path -->
<span>Online Bookstore</span>
<div>
<a href="[Link]">Home</a>
<a href="[Link]">Login</a>
<a href="[Link]">Registration</a>
<a href="[Link]">Catalogue</a>
<a href="[Link]">Cart</a>
</div>
</div>
<div class="main-frame">
<div class="left-frame">
<a href="#" onclick="loadCatalogue('CSE')">CSE</a>
<a href="#" onclick="loadCatalogue('ECE')">ECE</a>
<a href="#" onclick="loadCatalogue('EEE')">EEE</a>
<a href="#" onclick="loadCatalogue('CIVIL')">CIVIL</a>
</div>
<div class="right-frame">
<div class="registration-form">
<h2>Registration</h2>
<form onsubmit="return validateForm()">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="password">Password:</label>
<input type="password" id="password"
name="password" required>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
</div>
</div>
</div>
</div>
<script>
function loadCatalogue(category) {
[Link]('.right-frame').innerHTML =
`<h2>${category} Catalogue</h2><p>Books for ${category} will be displayed
here.</p>`;
}
function validateForm() {
const name = [Link]('name').value;
const password = [Link]('password').value;
// Validate Name: Only alphabets and at least 6 characters
const namePattern = /^[A-Za-z]+$/;
if () {
alert('Name should contain only alphabets.');
return false;
}
if ([Link] < 6) {
alert('Name should be at least 6 characters long.');
return false;
}
// Validate Password: At least 6 characters
if ([Link] < 6) {
alert('Password should be at least 6 characters long.');
return false;
}
return true; // Form is valid
}
</script>
</body>
</html>