Scribd
Upload
14 views12 pages

Experiment 3

pps

Uploaded by

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

Experiment 3

pps

Uploaded by

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

EXPERIMENT- 3

Aim : Use JavaScript for doing client – side validation of the pages implemented in the experiment
1(shopping cart-app):

1. registration.html
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Scient e-Book Store :: Registration</title>

<link rel="stylesheet" href="../css/header.css">

<link rel="stylesheet" href="../css/footer.css">

<link rel="stylesheet" href="../css/registration.css">

<style>

.error {

border: 1px solid red !important;

</style>

<script src="../js/registration-validation.js"></script>

</head>

<body>

<header>

<nav>

<ul>

<li><a href="../index.html">Home</a></li>

<li><a href="registration.html">Register</a></li>

<li><a href="login.html">Login</a></li>

<li><a href="catalog.html">Catalog</a></li>

<li><a href="cart.html">Cart</a></li>

</ul>
</nav>

</header>

<div class="registration-container">

<h2>Registration</h2>

<form onsubmit="return validateForm()">

<div class="form-group">

<input type="text" id="firstname" name="firstname"


placeholder="First Name">

<input type="text" id="lastname" name="lastname"


placeholder="Last Name">

</div>

<div class="form-group">

<input type="email" id="email" name="email"


placeholder="Email">

</div>

<div class="form-group">

<input type="tel" id="phone" name="phone" placeholder="Phone">

</div>

<div class="form-group">

<input type="password" id="password" name="password"


placeholder="Choose Password">

</div>

<div class="form-group">

<input type="password" id="confirmPassword"


name="confirmPassword" placeholder="Confirm Password">

</div>

<div class="form-group" id="gender-error">

<label>Gender:</label>

<input type="radio" id="male" name="gender" value="male"><label


for="male">Male</label>

<input type="radio" id="female" name="gender"


value="female"><label for="female">Female</label>

<input type="radio" id="other" name="gender"


value="other"><label for="other">Other</label>

</div>
<div class="form-group">

<label for="dob">Date of Birth:</label>

<input type="date" id="dob" name="dob">

</div>

<div class="form-group">

<textarea id="address" name="address"


placeholder="Address"></textarea>

</div>

<div class="form-group">

<input type="text" id="area" name="area" placeholder="Area


Pincode">

</div>

<div class="form-group">

<label for="state">State:</label>

<select id="state" name="state">

<option value="">Select State</option>

<option value="Telangana">Telangana</option>

<option value="Andhrapradesh">Andhrapradesh</option>

<option value="Tamilnadu">Tamilnadu</option>

</select>

</div>

<div class="form-group">

<label for="district">District:</label>

<select id="district" name="district">

<option value="">Select District</option>

<option value="RangaReddy">RangaReddy</option>

<option value="Ananthapur">Ananthapur</option>

<option value="Kanchipuram">Kanchipuram</option>

</select>

</div>

<button type="submit">Register</button>

</form>

</div>
<footer>

<p>All Rights Reserved &copy; | By Scient Institute of Technology</p>

</footer>

</body>

</html>

1.2). registration-validation.js:
function validateForm() {

var firstname = document.getElementById("firstname");

var lastname = document.getElementById("lastname");

var email = document.getElementById("email");

var phone = document.getElementById("phone");

var dob = document.getElementById("dob");

var address = document.getElementById("address");

var pincode = document.getElementById("area");

var state = document.getElementById("state");

var district = document.getElementById("district");

var password = document.getElementById("password");

var confirmPassword = document.getElementById("confirmPassword");

var gender = document.getElementsByName("gender");

var genderError = document.getElementById("gender-error");

var isError = false;

if (firstname.value === "") {

firstname.classList.add("error");

isError = true;

} else {

firstname.classList.remove("error");
}

if (lastname.value === "") {

lastname.classList.add("error");

isError = true;

} else {

lastname.classList.remove("error");

if (email.value === "") {

email.classList.add("error");

isError = true;

} else {

email.classList.remove("error");

if (phone.value === "") {

phone.classList.add("error");

isError = true;

} else {

phone.classList.remove("error");

if (dob.value === "") {

dob.classList.add("error");

isError = true;

} else {

dob.classList.remove("error");

if (address.value === "") {

address.classList.add("error");

isError = true;

} else {

address.classList.remove("error");

if (pincode.value === "") {


pincode.classList.add("error");

isError = true;

} else {

pincode.classList.remove("error");

if (state.value === "") {

state.classList.add("error");

isError = true;

} else {

state.classList.remove("error");

if (district.value === "") {

district.classList.add("error");

isError = true;

} else {

district.classList.remove("error");

if (password.value === "") {

password.classList.add("error");

isError = true;

} else {

password.classList.remove("error");

if (confirmPassword.value === "") {

confirmPassword.classList.add("error");

isError = true;

} else {

confirmPassword.classList.remove("error");

var isChecked = false;

for (var i = 0; i < gender.length; i++) {

if (gender[i].checked) {
isChecked = true;

break;

if (!isChecked) {

genderError.classList.add("error");

isError = true;

} else {

genderError.classList.remove("error");

if (isError) {

alert("All fields must be filled out");

return false;

if (password.value !== confirmPassword.value) {

password.classList.add("error");

confirmPassword.classList.add("error");

alert("Passwords do not match");

return false;

return true;

}
2. login.html:
<!DOCTYPE html>

<html>

<head>

<meta charset="ISO-8859-1">

<title>Scient e-Book Store :: Login</title>

<link rel="stylesheet" href="../css/header.css">

<link rel="stylesheet" href="../css/footer.css">

<link rel="stylesheet" href="../css/login.css">


<style>

.error {

border: 1px solid red !important;

</style>

<script src="../js/login-validation.js"></script>

</head>

<body>

<header>

<nav>

<ul>

<li><a href="../index.html">Home</a></li>

<li><a href="registration.html">Register</a></li>

<li><a href="login.html">Login</a></li>

<li><a href="catalog.html">Catalog</a></li>

<li><a href="cart.html">Cart</a></li>

</ul>

</nav>

</header>

<!-- HTML Structure -->

<div class="login-container">

<h2>Login</h2>

<form onsubmit="return validateForm()" method="post">

<!-- User Name and Password -->

<div class="form-group">

<label for="username">User Name:</label>

<input type="text" id="username" name="username">

</div>

<div class="form-group">

<label for="password">Password:</label>

<input type="password" id="password" name="password">

</div>
<button type="submit">Login</button>

<a href="forgot-password.html" style="text-align: center;">Forgot


Password?</a>

</form>

</div>

<footer>

<p>All Rights Reserved &copy; | By Scient Institute of Technology</p>

</footer>

</body>

</html>

2.1). login-validation.js:
function validateForm() {

var username = document.getElementById("username");

var password = document.getElementById("password");

var isError = false;

if (username.value === "") {

username.classList.add("error");

isError = true;

} else {

username.classList.remove("error");

if (password.value === "") {

password.classList.add("error");

isError = true;

} else {

password.classList.remove("error");

if (isError) {

alert("All fields must be filled out");

return false;

}
return true;

OUTPUT:

You might also like