Experiment 3

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>
<input type="email" id="email" name="email"

placeholder="Email">
</div>
<input type="tel" id="phone" name="phone" placeholder="Phone">
</div>
<input type="password" id="password" name="password"

placeholder="Choose Password">
</div>
<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>
<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob">
</div>
<textarea id="address" name="address"

placeholder="Address"></textarea>
</div>
<input type="text" id="area" name="area" placeholder="Area

Pincode">
</div>
<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>
<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 © | 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) {
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>

<div class="login-container">
<h2>Login</h2>
<form onsubmit="return validateForm()" method="post">

<label for="username">User Name:</label>
<input type="text" id="username" name="username">
</div>
<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 © | 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 === "") {
isError = true;
} else {
password.classList.remove("error");
if (isError) {
alert("All fields must be filled out");
return false;
}
return true;
OUTPUT:

Experiment 3

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Experiment 3

Uploaded by

Copyright:

Available Formats

EXPERIMENT- 3

<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">

border: 1px solid red !important;

<form onsubmit="return validateForm()">

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 === "") {

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

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

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

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

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

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

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

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

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

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

var isChecked = false;

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

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

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

alert("Passwords do not match");

<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">

border: 1px solid red !important;

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

<p>All Rights Reserved © | By Scient Institute of Technology</p>

<p>All Rights Reserved © | By Scient Institute of Technology</p>