CS101 Introduction to Computing Assignment 3 Solution Fall 2012

Question: Marks 20

Make a registration form page using html and JavaScript. Your page’s output should look like as given below.

On fields you will apply checks according to details given below, For example using JavaScript you will apply Check on User Id, it should be of at least 5 characters and at most of 7 characters and should not be empty.

Script should check the fields one by one when you click submit button.

Clicking on reset button will clear all the fields. Hit: No need to use JavaScript to clear the fields

Value of action attribute of form will be http://www.vu.edu.pk/

Check 1 (on userid)

Check 2 (on Password)

Check 2 (on User Name)

Check 3 (on Country) (Note: Your country list can contain 5 to 6 countries)

Check 4(on Email)

Check 5 (on Gender Option)

Check 6 (on Form submission)

Note:
You have to develop the assignment in Notepad.

Your country list will contain 5 or 6 countries. No need to mention all the countries in the world.

You will submit only HTML file (.html). None of the other files will be acceptable.


Solution:

<html>
<head>
<script>

function form()
{
var uid = document.registration.userid;
var passid = document.registration.passid;
var uname = document.registration.username;
var ucountry = document.registration.country;
var uemail = document.registration.email;
var umsex = document.registration.msex;
var ufsex = document.registration.fsex;
if(userid_validation(uid,5,12))
{
if(passid_validation(passid,7,12))
{
if(allLetter(uname))
{ 
if(countryselect(ucountry))
{
if(ValidateEmail(uemail))
{
if(validsex(umsex,ufsex))
{
}
} 
}
}
}
}
return false;

} function userid_validation(uid,mx,my)
{
var uid_len = uid.value.length;
if (uid_len == 0 || uid_len >= my || uid_len < mx)
{
window.alert("User Id should not be empty / length be between "+mx+" to "+my);
uid.focus();
return false;
}
return true;
}
function passid_validation(passid,mx,my)
{
var passid_len = passid.value.length;
if (passid_len == 0 ||passid_len >= my || passid_len < mx)
{
window.alert("Password should not be empty / length be between "+mx+" to "+my);
passid.focus();
return false;
}
return true;
}
function allLetter(uname)
{ 
var letters = /^[A-Za-z]+$/;
if(uname.value.match(letters))
{
return true;
}
else
{
window.alert('Name must have alphabet characters only');
uname.focus();
return false;
}
}
function countryselect(ucountry)
{
if(ucountry.value == "Default")
{
window.alert('Select your country from the list');
ucountry.focus();
return false;
}
else
{
return true;
}
}
function ValidateEmail(uemail)
{
var mailformat = /^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/;
if(uemail.value.match(mailformat))
{
return true;
}
else
{
window.alert("Please enter valid email address!");
return false;
}
} function validsex(umsex,ufsex)
{
x=0;

if(umsex.checked) 
{
x++;
}
if(ufsex.checked)
{
x++; 
}
if(x==0)
{
window.alert('Select Male/Female');
umsex.focus();
return false;
}
else
{
window.alert('Form Succesfully Submitted');
window.location.reload()
return true;
}
}
</script>
</head>
<body>
<h1>Registration Form</h1>
<form name='registration' method="post"  onSubmit="form();" action="http://www.vu.edu.pk">
<OL>
<table><tr>
<td><label for="userid">User id:</label></td></tr>
<tr><td><input type="text" name="userid" size="12" /></td></tr>
<tr><td><label for="passid">Password:</label></td></tr>
<tr><td><input type="password" name="passid" size="12" /></td><tr>
<tr><td><label for="username">Name:</label></td></tr>
<tr><td><input type="text" name="username" size="50" /></td></tr>
<tr><td><label for="country">Country:</label></td></tr>
<tr><td><select name="country">
<option selected="" value="Default">(Please select a country)</option>
<option value="value1">USA</option>
<option value="value2">India</option>
<option value="value3">Germany</option>
<option value="value4">Bangladesh</option>
<option value="value5">Turkey</option>
</select></td></tr>
<tr><td><label for="email">Email:</label></td></tr>
<tr><td><input type="text" name="email" size="50" /></td></tr>
<tr><td><label id="gender">Gender:</label></td></tr>
<tr><td><input type="radio" name="msex" value="Male" onclick="document.registration.fsex.checked=false;" /><span>Male</span></td></tr>
<tr><td><input type="radio" name="fsex" value="Female" onclick="document.registration.msex.checked=false;"/><span>Female</span></td></tr></table>
<br>
<br>
<table><tr><td><input type="submit" name="submit" value="Submit"/></td>
<td><input type="reset" value="Reset"></td></tr></table>
</ol>
</form>
</body>
</html>

 

DOWNLOAD SOLUTION HERE
loading...
  • Abc

    this is not a complete solution. And many things are incomplete here