Create an HTML document called assignment4.html that collects the following info
ID: 3851202 • Letter: C
Question
Create an HTML document called assignment4.html that collects the following information from the user:
Next modify assignment4.html to include the JavaScript code required for field validation.
Following are the guidelines for validating the user input:
à All the fields are mandatory (cannot be left blank)
à The postal code has to be in the a0a0a0 format – (research it on the internet)
à Province is one of QC, ON, MN, SK, AB, BC.
à Age has to be at least 18 yrs. old.
à The Email field must contain the @ and . characters
(5% of the mark for using a regular expression – research it on the internet)
à The Confirm Password and Password fields should have identical input.
à Passwords must have at least 6 characters and must contain at least one digit and one upper-case character.
(5% of the mark for using a regular expression – research it on the internet)
When the form fields pass validation, an alert message is displayed to show a confirmation message (e.g. “Thanks for registering with our website, your customer record was created successfully.”).
(10% of the mark) Customize/design your page using a CSS style sheet and graphics of your choice. Include a banner area with graphics and a title of your choice, add additional visual enhancements to the page as you consider suitable.
Upload the html document and supporting picture files to the studentweb server and create a hyperlink called Assignment 4 from your home page to point to the assignment4.html file.
COURSE COMP125 mer 2017 ASSIGNMENT #4 Form Validation Create an HTML document called html that collects the following information from the user Member Registration se complete all the fields below: First Name: Last Name: Address: City Postal Code: Province Age: Password Confirm Email Register Now Clear Form CCopyright your student info hereExplanation / Answer
Assignment4.html code :
<!DOCTYPE html>
<html>
<head>
<title>Student Info Form</title>
<link rel='stylesheet' href="Assignment4.css" type='text/css' />
<script src="Assignment4.js"></script>
</head>
<body>
<body>
<h1>Member Registration</h1>
<p>Please complete the all fields below:</p>
<form name='registration'> <!--method="post" action=""-->
<ul>
<li><label for="userid">First name:<sup>*</sup> </label></li>
<li><input type="text" name="fname" size="27" /></li>
<li><label for="passid">Last name:<sup>*</sup> </label></li>
<li><input type="text" name="lname" size="27" /></li>
<li><label for="address">Address:<sup>*</sup> </label></li>
<li><input type="text" name="address" size="27" /></li>
<li><label for="userid">City:<sup>*</sup> </label></li>
<li><input type="text" name="city" size="27" /></li>
<li><label for="passid">Postal Code:<sup>*</sup> </label></li>
<li><input type="text" name="postalcode" size="27" /></li>
<li><label for="userid">Provience:<sup>*</sup> </label></li>
<!--<li><input type="text" name="provience" size="27" /></li> -->
<li><select name="provience">
<option selected="" value="Default">(Please select a Provience)</option>
<option value="QC">QC</option>
<option value="ON">ON</option>
<option value="MN">MN</option>
<option value="SK">SK</option>
<option value="AB">AB</option>
<option value="BC">BC</option>
</select></li>
<li><label for="passid">Age:<sup>*</sup> </label></li>
<li><input type="text" name="age" size="27" /></li>
<li><label for="userid">Password:<sup>*</sup> </label></li>
<li><input type="Password" name="passid" size="27" /></li>
<li><label for="passid">Confirm:<sup>*</sup> </label></li>
<li><input type="Password" name="confirm" size="27" /></li>
<li><label for="email">Email:<sup>*</sup> </label></li>
<li><input type="text" name="email" size="27" /></li>
<li><input type="submit" name="submit" value="Register Now"onClick="return formValidation();"/></li>
<li><input type="reset" name="reset" value="Clear Form" /></li>
</ul>
</form><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<p>© Copyright your Student info here</p>
</body>
</html>
Assignment4.CSS code:
h1 {
margin-left: 70px;
}
form li {
list-style: none;
margin-bottom: 5px;
}
form ul li label{
float: left;
clear: left;
width: 100px;
text-align: right;
margin-right: 10px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
}
form ul li input, select, span {
float: left;
margin-bottom: 10px;
}
[type="submit"] {
float:left;
clear:left;
margin: 10px 0 0 40px;
font-size:18px ;
display:inline;
}
[type="reset"] {
float:left;
clear:right;
margin: 10px 0 0 20px;
font-size:18px ;
display:inline;
}
p {
margin-left: 70px;
font-weight: bold;
}
Assignment4.js code:
function formValidation()
{
var emailRegex = /^[A-Za-z0-9._]*@[A-Za-z]*.[A-Za-z]{2,5}$/; // regular expression for validating email
var pwdRegex=/^(?=.*d)(?=.*[a-z])(?=.*[A-Z]).{6,}$/;///^(?=.*d).{4,8}$/ //regeular expression for validating password
var posRegex=/^[A-Za-z]d[A-Za-z][-]?d[A-Za-z]d/; // regular expression for validating postal code in a0a0a0 format
var fname = document.registration.fname.value;
var lname = document.registration.lname.value;
var uadd = document.registration.address.value;
var city = document.registration.city.value;
var postalcode = document.registration.postalcode.value;
var provience = document.registration.provience.value;
var passid = document.registration.passid.value;
var uage = document.registration.age.value;
var uconfirm = document.registration.confirm.value;
var uemail = document.registration.email.value;
if( fname == "" )
{ alert('enter the first name!');
document.registration.fname.focus() ;
return false;
}
if( lname == "" )
{
document.registration.lname.focus() ;
alert('enter the last name!');
return false;
}
if( uadd == "" )
{
document.registration.address.focus() ;
alert('enter the address!');
return false;
}
if( city == "" )
{
document.registration.city.focus() ;
alert('enter the City!');
return false;
}
if( postalcode == "" )
{
document.registration.postalcode.focus() ;
alert('enter the postalcode!');
return false;
}
else if(!posRegex.test(postalcode))
{
document.registration.postalcode.focus() ;
alert('The postal code should be in the a0a0a0 format !');
return false;
}
/* if(!provienceselect(provience))
{
return false;
}*/
/* if( provience == "" )
{
document.registration.provience.focus() ;
alert('enter the provience!');
return false;
}
else*/ if(provience.value == "Default")
{
alert('Select your provience from the list');
document.registration.provience.focus() ;
return false;
}
if( uage == "" )
{
document.registration.age.focus() ;
alert('enter the age!');
return false;
}
else if(uage<"18"){
document.registration.age.focus() ;
alert('Age should be more than 18 years!');
return false;
}
if( passid == "" )
{
document.registration.passid.focus() ;
alert('enter the password!');
return false;
}
else if(!pwdRegex.test(passid))
{
document.registration.passid.focus() ;
alert('Passwords must have at least 6 characters and must contain at least one digit and one upper-case character!');
return false;
}
if( uconfirm == "" )
{
document.registration.confirm.focus() ;
alert('enter the confirm password!');
return false;
}
else if(uconfirm !=passid)
{
document.registration.confirm.focus() ;
alert('Re-enter the confirm password!');
return false;
}
if( uemail == "" )
{
document.registration.email.focus() ;
alert('enter the email!');
return false;
}
else if(!emailRegex.test(uemail)){
alert('Re-enter the valid email!');
document.registration.email.focus();
return false;
}
if(fname != '' && lname != '' && uadd != '' && city != '' && postalcode != '' && provience != '' && uage != ''&& passid != '' &&uconfirm != '' && uemail !='') // condition for check mandatory all fields
{
alert('Thanks for registering with our website, your customer record was created successfully.');
}
}
Note: Please copy these code in notepad and save as Assignment4.html,Assignment4.css,Assignment4.js respectively for html,css and javascript code separately in one folder in your computer after that run the html file in the compatible browser as Internet Explorer, Google Chrome, Mozilla firefox etc. whereas will get proper output.
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.