Skill Development Course - NodeJs Lab
WEEK-3
Use JavaScript for doing client – side validation of the pages implemented
in experiment 1 and experiment 2.
Solution :
☛ Client - Side validation of Registration Page
[Link]
<html>
<head>
<title> Welcome to NNRG e-Book's website</title>
<script language="javascript">
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];
if ([Link]<=0)
{
alert("Please Enter email");
[Link]();
return false;
}
else {
let eflag=false;
for(i=0;i<[Link];i++) {
if([Link](i)=="@")
{
eflag=true;
}
}
if(!(eflag))
{
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
let flag=false;
for(i=0;i<[Link];i++)
if([Link][i].checked)
flag=true;
if(!(flag))
{
alert("Please choose a Gender");
return false;
}
// Language validation
flag=false;
for(i=0;i<[Link];i++)
if([Link][i].checked)
flag=true;
if(!(flag))
{
alert("Please select at least one of the Language options.")
;
return false;
}
// address validation
var addr = [Link];
if ([Link]<=0)
{
alert("Please Enter address");
[Link]();
return false;
}
// to display Success message
alert("Registration Successful");
}
</script>
</head>
<body>
<center><br>
<h3>Registration Form </h3>
<br/>
<form name="f1">
<table cellpadding="1" align="center" >
<tr><td> User Name:*</td>
<td><input type="text" name="username"></td></tr>
<tr><td>Password:*</td>
<td><input type="password" name="password"></td></tr>
<tr><td>Email ID:*</td>
<td><input type="text" name="email"></td></tr>
<tr><td>Phone Number:*</td>
<td><input type="text" name="phno"></td></tr>
<tr><td valign="top">Gender:*</td>
<td><input type="radio" name="gen" value="Male">Male  
;
<input type="radio" name="gen" value="Female">Female</td></tr>
<tr> <td valign="top">Language Known:*</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">Address:*</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="#FF0000">fields are mandatory<
/font>
</td>
</tr>
</table>
</form>
</center>
</body>
</html>
Output :