Answered: Validations checks are imposed for each…

Computer Networking: A Top-Down Approach (7th Edition)

7th Edition

ISBN:9780133594140

Author:James Kurose, Keith Ross

Publisher:James Kurose, Keith Ross

Chapter1: Computer Networks And The Internet

Section: Chapter Questions

Problem R1RQ: What is the difference between a host and an end system? List several different types of end...

See similar textbooks

Related questions

Question

There are two codes given (one is html code and another is external javascript code):

1. html file

<html>
	<head>

	<title>JavaScript registration from validation Code</title>
	<h2>Registration Form</h2>

	<script src="my-form-validation.js"></script>


	</head>
	<body onload="document.form1.userid.focus();">

	<form name='form1' onsubmit='formValidation()' >

	<table width="500" cellpadding="3" style="border-collapse: collapse;">
	<tr>
	<td>User id </td>
	<td><input type="text" name="userid" size="12" /></td>
	</tr>
	<tr>
	<td>Password</td>
	<td><input type="password" name="passid" size="12" /></td>
	</tr>
	<tr>
	<td>Name</td>
	<td><input type="text" name="username" size="50" /></td>
	</tr>
	<tr>
	<td>Address</td>
	<td><input type="text" name="address" size="50" /></td>
	</tr>
	<tr>
	<td>Country</td>
	<td><select id="country" name="country">
	<option selected="" value="PS">(Please select a country)</option>
	<option value="--">none</option>
	<option value="PK">Pakistan</option>
	<option value="KY">Kyrgyzstan</option>
	<option value="TJ">TaJkistaj</option>
	<option value="KZ">Kazakstan</option>
	<option value="AF">Afghanistan</option>

	</select></td>
	</tr>
	<tr>
	<td>ZIP Code </td>
	<td><input type="text" name="zip" /></td>
	</tr>
	<tr>
	<td>Email</td>
	<td><input type="text" name="email" size="50" /></td>
	</tr>
	<tr>
	<td>Sex</td>
	<td><input type="radio" name="msex" value="Male" /> Male
	<input type="radio" name="fsex" value="Female" /> Female</td>
	</tr>
	<tr>
	<td>Language preference</td>
	<td><input type="checkbox" name="en" value="en" checked />English
	<input type="checkbox" name="nonen" value="noen" />Non English</td>
	</tr>
	<tr>
	<td>Write about yourself<br>
	(optional)</td>
	<td><textarea name="desc" rows="4" cols="40"></textarea></td>
	</tr>
	<tr>
	<td> </td>
	<td><input type="submit" name="submit" value="Submit" /></td>
	<td> </td>
	</tr>
	</table>
	</form>
	</body>
	</html>

2. javascript file "my-form-validation.js"

function formValidation()
{
var uid = document.form1.userid;
var passid = document.form1.passid;
var uname = document.form1.username;
var uadd = document.form1.address;
var ucountry = document.form1.country;
var uzip = document.form1.zip;
var uemail = document.form1.email;
var umsex = document.form1.msex;
var ufsex = document.form1.fsex;

if(userid_validation(uid,5,12))
{
if(allnumeric(uid))
{
if(userid_validation(passid,7,12))
{
if(allLetter(uname))
{
if(alphanumeric(uadd))
{
if(countryselect(ucountry))
{
if(allnumeric(uzip))
{
if(ValidateEmail(uemail))
{
if(validsex(umsex,ufsex))
{
alert('Good Luck. Your form is submitted successfully');
}
}
}
}
}
}
}
}
}
return false;
}

function userid_validation(uid,mx,my)
{
var uid_len = uid.value.length;
if (uid_len == 0 || uid_len >= my || uid_len < mx)
{
alert("This field should not be empty/length be between "+mx+" to "+my);
uid.focus();
return false;
}
return true;
}

function allLetter(uname)
{
var letters = /^[A-Za-z]+$/;
if(uname.value.match(letters))
{
return true;
}
else
{
alert('Please input alphabet characters only');
uname.focus();
return false;
}
}

function alphanumeric(uadd)
{
var letters = /^[0-9a-zA-Z]+$/;
if(uadd.value.match(letters))
{
return true;
}
else
{
alert('Please input alphanumeric characters only');
uadd.focus();
return false;
}
}

function countryselect(ucountry)
{
if(ucountry.value == "PS")
{
alert('Select your country from the list');
ucountry.focus();
return false;
}
else
{
return true;
}
}

function allnumeric(uzip)
{
var numbers = /^[0-9]+$/;
if(uzip.value.match(numbers))
{
return true;
}
else
{
alert('Please input numeric characters only');
uzip.focus();
return false;
}
}

function validsex(umsex,ufsex)
{
x=0;

if(umsex.checked)
{
x++;
}

if(ufsex.checked)
{
x++;
}
if(x==0)
{
alert('Select Male/Female');
umsex.focus();
return false;
}
else
{
return true;

}

}

Validations checks are imposed for each input box.
Modify the code for the actions below.
Use "onKeyup" event, which will validate every input box separately. eg. if the user enters wrong data in the user id box, a message box or some red color text should be displayed as "Enter the valid id", and the focus should stay on the same input put box, and same for all the input boxes.

Important: You have to modify/write your validation code in the external javascript code.

Expert Solution