Scribd
Upload
11 views

Experiment 3

pps

Uploaded by

shyamrjs
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
11 views

Experiment 3

pps

Uploaded by

shyamrjs
Copyright
© © All Rights Reserved
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