Write in
NodeJS
Observation
3. Use JavaScript for doing client – side validation of the pages implemented in
experiment 1 and experiment 2
Javascript:
JavaScript is a high-level, dynamic programming language used primarily for
creating interactive and dynamic content on web pages. It allows developers to
implement complex features like displaying timely content updates, interactive
maps, animations, form validation, and more. JavaScript is a core technology of
web development, alongside HTML and CSS.
Functions in Javascript:
In JavaScript, a function is a block of code designed to perform a particular task,
and it can be reused multiple times by "calling" the function. Functions help
organize code, improve readability, and enable reusability.
Syntax:
A function declared with the function keyword.
function functionName(Parameter1, Parameter2, ...)
// Function body
AIM:Use JavaScript for doing client – side validation of the pages implemented in
experiment 1: Build a responsive web application for shopping cart with
registration, login, catalog and cart pages using CSS3 features, flex and grid and
experiment 2: Make the above web application responsive web application using
Bootstrap framework.
DESCRIPTION:To perform client-side validation using JavaScript, you can add
scripts to validate user inputs on the registration and login pages.
Project Structure:
1. [Link] - Main HTML file containing the structure of the web
application.
2. [Link] - JavaScript file for handling interactions and logic
3. [Link] - CSS file for styling the web pages.
1. [Link]
<html>
<head>
<title> Welcome to BOOKISH e-Book's website</title>
<link rel="stylesheet"href="./[Link]">
<script type="text/javascript"src="[Link]"></script>
</head>
<body>
<center><br>
<h1>Registration Form </h1>
<br/>
<form name="f1">
<table cellpadding="1" align="center">
<tr><td><b>User Name:*</b></td>
<td><input type="text" name="username"></td></tr>
<tr><td><b>Password:*</b></td>
<td><input type="password" name="password"></td></tr>
<tr><td><b>Email ID:*</b></td>
<td><input type="text" name="email"></td></tr>
<tr><td><b>Phone Number:*</b></td>
<td><input type="text" name="phno"></td></tr>
<tr><td valign="top"><b>Gender:*</b></td>
<td><input type="radio" name="gen" value="Male">Male
<input type="radio" name="gen" value="Female"><b>Female</b></td></tr>
<tr><td valign="top"><b>Language Known:*</b></td>
<td><input type="checkbox" name="lang" value="English">English<br/>
<input type="checkbox" name="lang" value="Telugu">Telugu<br>
<input type="checkbox" name="lang" value="Hindi">Hindi<br>
<input type="checkbox" name="lang" value="Tamil">Tamil
</td></tr>
<tr><td valign="top"><b>Address:*</b></td>
<td><textarea name="address"></textarea></td>
<tr><td></td><td><input type="button"
value="SUBMIT"hspace="10"onclick="validate()">
<input type="reset" value="RESET"></td></tr>
<tr><td colspan=2 >*<font color="red">fields are mandatory</font>
</td>
</tr>
</table>
</form>
</center>
</body>
</html>
2. [Link]
//client-side valoidation
function validate()
{
// username validation
var uname = [Link];
if ([Link]<=0)
{
alert("Please Enter UserName");
[Link]();
return false;
}
if ([Link] < 8)
{
alert("Please enter UserName not less than 8");
[Link]();
return false;
}
//password validation
var pwd = [Link];
if ([Link]<=0)
{
alert("Please Enter password");
[Link]();
return false;
}
if ([Link] < 6)
{
alert("Please enter Password not less than 6");
[Link]();
return false;
}
// Email validation
var email = [Link](); // Trim whitespace
if ([Link] <= 0) {
alert("Please enter an email.");
[Link]();
return false;
}
// Check for the presence of "@" and "."
if ([Link]("@") === -1 || [Link](".") === -1) {
alert("Please enter a valid Email ID");
[Link]();
return false;
}
// Ensure "@" comes before "."
if ([Link]("@") > [Link](".")) {
alert("Please enter a valid Email ID");
[Link]();
return false;
}
// phone number validation
var phno = [Link];
if ([Link]<=0)
{
alert("Please Enter Phone Number");
[Link]();
return false;
}
if (isNaN(phno))
{
alert("Please Enter Valid Phone Number");
[Link]();
return false;
}
if ([Link] != 10)
{
alert("Please Enter Valid Phone Number");
[Link]();
return false;
}
// gender validation
if ([Link] == false && [Link] == false) {
alert("Please choose a Gender");
return false;
}
// Language validation
if ([Link] == false &&
[Link] == false &&
[Link] == false)
{
alert("Please select at least one language.");
return false;
}
// address validation
var addr = [Link];
if ([Link]<=0)
{
alert("Please Enter address");
[Link]();
return false;
}
// to display Success message
alert("Registration Successful");
}
3. [Link]
body {
font-family: monospace;
background-color: LightGray;
color: solid black;
margin-left: 50px;
height: 65vh;
font-size: 15px;
}