The JavaScript code is given below. Check it and use all the validation checks, so that the program will have the form(structure) like in the given picture. Form Validation First Name: Last Name: Email: User Id: Password: Confirm Password:
The JavaScript code is given below. Check it and use all the validation checks, so that the program will have the form(structure) like in the given picture.
<html>
<head>
<title>Form Validation</title>
<script type="text/javascript">
var divs=new Array();
divs[0]="errFirst";
divs[1]="errLast";
divs[2]="errEmail";
divs[3]="errUid";
divs[4]="errPassword";
divs[5]="errConfirm";
function validate()
{
var inputs=new Array();
inputs[0]=document.getElementByld('first').value;
inputs[1]=document.getElementByld('last').value;
inputs[2]=document.getElementByld('email').value;
inputs[3]=document.getElementByld('uid').value;
inputs[4]=document.getElementByld('password').value;
inputs[5]=document.getElementByld('confirm').value;
var errors=new Array();
errors[0]="<span style='color:red'>Please enter your first name!</span>";
errors[1]="<span style='color:red'>Please enter your last name!</span>";
errors[2]="<span style='color:red'>Please enter your email!</span>";
errors[3]="<span style='color:red'>Please enter your user id!</span>";
errors[4]="<span style='color:red'>Please enter your password!</span>";
errors[5]="<span style='color:red'>Please confirm your password!</span>";
for (i in inputs)
{
var errMessage=errors[i];
var div=divs[i];
if(inputs[i]=="")
document.getElementByld(div).innerHTML=errMessage;
else if (i==2)
{
var atpos=inputs[i].indexOf("@");
var dotpos=inputs[i].lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=inputs[i].length)
document.getElementByld('errEmail').innerHTML="<span style='color:red'>Enter a valid email address!</span>";
else
document.getElementByld(div).innerHTML="OK!";
}
else if (i==5)
{
var first=document.getElementByld('password').value;
var second=document.getElementByld('confirm').value;
if (second!=first)
document.getElementByld('errConfirm').innerHTML="<span style='color:red'>Your passwords don't match!</span>";
else
document.getElementByld(div).innerHTML="OK!";
}
else
document.getElementByld(div).innerHTML="OK!";
}
}
function finalValidate()
{
var count=0;
for(i=0;i<6;i++)
{
var div=divs[i];
if(document.getElementByld(div).innerHTML=="OK!")
count=count+1;
}
if(count==6)
document.getElementByld("errFinal").innerHTML="All the data entered is correct!!!";
}
</script>
</head>
<body>
<table id="table1">
<tr>
<td>First Name:</td>
<td><input type="text" id="first" onkeyup="validate();"/></td>
<td><div id="errFirst"></div></td>
</tr>
<tr>
<td>Last Name:</td>
<td><input type="text" id="last" onkeyup="validate();"/></td>
<td><div id="errLast"></div></td>
</tr>
<tr>
<td>Email:</td>
<td><input type="text" id="email" onkeyup="validate();"/></td>
<td><div id="errEmail"></div></td>
</tr>
<tr>
<td>User Id:</td>
<td><input type="text" id="uid" onkeyup="validate();"/></td>
<td><div id="errUid"></div></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" id="password" onkeyup="validate();"/></td>
<td><div id="errPassword"></div></td>
</tr>
<tr>
<td>Confirm Password:</td>
<td><input type="password" id="confirm" onkeyup="validate();"/></td>
<td><div id="errConfirm"></div></td>
</tr>
<tr>
<td><input type="button" id="create" value="Create" onclick="validate();finalValidate();"/></td>
<td><div id="errFinal"></div></td>
</tr>
</table>
</body>
</html>
![First Name:
Last Name:
Email:
User Id:
Password:
Confirm Password:
Create
] Please enter your first name!
|Please enter your last name!
| Please enter your email!
|Please enter your user id!
| Please enter your password!
| Please confirm your password!
First Name:
Last Name:
Email:
User Id:
Password:
Confirm Password:
Create
First Name:
Ayesha
OK!
Lara
OK!
OK!
Last Name:
Email:
ays@yahoo.com
User Id:
12345
OK!
Password:
OK!
Confirm Password:
OK!
....
Create
All the data you entered is correct!!!](/v2/_next/image?url=https%3A%2F%2Fcontent.bartleby.com%2Fqna-images%2Fquestion%2Ff3dad014-c6bb-4735-812f-053559c6a885%2F1b5deb76-bd2b-4b1e-8e7b-fba7c0c4b1e6%2Fham8gob_processed.png&w=3840&q=75)
Step by step
Solved in 2 steps with 2 images
