Question 2 - HTML Take the information you modeled in question 1 and create an H
ID: 3598210 • Letter: Q
Question
Question 2 - HTML
Take the information you modeled in question 1 and create an HTML form that has all the field information needed to submit to the registry to process your driver's license. Reference and start with the HTML template provided. Make your form easy to work with so it could be used in the future as an entry form to add information about driver's licenses.
Question 3 - JavaScript
In Question 2, you created an HTML form. Add JavaScript code to provide validation to those form fields you feel would benefit from having error checking. The template referenced in question 2 provides a few examples on how this is done, just expand upon it. It will contain a button that can be clicked to start the JavaScript form validation process.
- License Form and Validator
myLicense Form Validator
Explanation / Answer
I have the validation and html code in the same page
I have commented some code so that you can get a clear Idea.
--------------------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
function check()
{
/* name validation */
var x=document.getElementById("name").value;
if(x.length > 100 || x.length == 0)
{
alert("Invalid Name(Name should not be empty and not more than 100 charecters)");
return false;
}
/* mobile number validation */
var mn="^[0-9]{12}$";
var d=new RegExp(mn);
var x = document.getElementById("phnno").value;
if(!x.match(d))
{
alert("Invalid Mobile Number");
}
/* aadhar number validation */
var mn="^[0-9]{12}$";
var d=new RegExp(mn);
var x = document.getElementById("aadhar").value;
if(!x.match(d))
{
alert("Invalid aadhar Number");
}
/* license number */
var d = document.getElementById("licno").value;
x=d[0];
if(!(x>'A' && x<'Z'))
{
alert("Invalid License Number");
}
x=d[1];
if(!(x>'A' && x<'Z'))
{
alert("Invalid License Number");
}
if((d.length)!=16)
{
alert("Invalid License Number");
}
/* date validation */
var dateformat = /^(0?[1-9]|[12][0-9]|3[01])[/-](0?[1-9]|1[012])[/-]d{4}$/;
var dob = document.getElementById("dob").value;
if(dob.match(dateformat))
{
//Test which seperator is used '/' or '-'
var opera1 = dob.split('/');
var opera2 = dob.split('-');
lopera1 = opera1.length;
lopera2 = opera2.length;
// Extract the string into month, date and year
if (lopera1>1)
{
var pdate = inputText.value.split('/');
}
else if (lopera2>1)
{
var pdate = inputText.value.split('-');
}
var dd = parseInt(pdate[0]);
var mm = parseInt(pdate[1]);
var yy = parseInt(pdate[2]);
// Create list of days of a month [assume there is no leap year by default]
var ListofDays = [31,28,31,30,31,30,31,31,30,31,30,31];
if (mm==1 || mm>2)
{
if (dd>ListofDays[mm-1])
{
alert('Invalid date format!');
return false;
}
}
if (mm==2)
{
var lyear = false;
if ( (!(yy % 4) && yy % 100) || !(yy % 400))
{
lyear = true;
}
if ((lyear==false) && (dd>=29))
{
alert('Invalid date format!');
return false;
}
if ((lyear==true) && (dd>29))
{
alert('Invalid date format!');
return false;
}
}
}
else
{
alert("Invalid date format!");
return false;
}
}
</script>
<form name="myForm" >
<label>FULL NAME : </label><input type="text" name ="name" id="name"><br>
<label>AADHAR NUMBER : </label> <input type="text" name="aadhar" id="aadhar"><br>
<label>CITY : </label> <input type="text" name="city" id="city"><br>
<label>DATA OF BIRTH : </label> <input type="text" name="dob" id="dob"><br>
<label>PHONE NUMBER : </label><input type = "text" name ="phnno" id ="phnno"><br>
<label>LICENSE NUMBER : </label><input type = "text" name ="licno" id ="licno"><br>
<input type="button" value="Submit">
<label id="com"></label>
</form>
</body>
</html>
------------------------------------------------------------------------------------------------------------------------
/* hope this helps */
/* if any queries please comment */
/* thank you */
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.