This is a JavaScript assignment, Please read carefully. Create an HTML5 page wit
ID: 3681951 • Letter: T
Question
This is a JavaScript assignment, Please read carefully.
Create an HTML5 page with JavaScript containing a form that simulates a credit card payment submission form. The user will input values in each field of the credit card form. Validate the form per credit card requirements. Cater for Visa, Mastercard and American Express credit card types. Use http://ss1.ciwcertified.com/cgi-bin/process.pl as the action for the form and include the novalidate attribute in the tag. Use the following rules for credit card number validation: Visa card numbers always begin with the numeral 4 and use 16 digits. MasterCard numbers always begin with the numeral 5 and use 16 digits. American Express card numbers always begin with the numeral 3 and use 15 digits. If the information entered is incorrect based on the card type selected, ask the user to either select a different credit card or change the card number. If the information entered is correct, acknowledge that.
I downvote if answer is incorrect or not what I'm asking for.
Explanation / Answer
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Credit card validation</title>
<script type="text/javascript">
function validate()
{
var no=document.getElementById('cardno').value;
var type=document.getElementById('cardtype').value;
var name=document.getElementById('cardname').value;
var year=document.getElementById('yeardropdown').value;
var month=document.getElementById('monthdropdown').value;
var flag;
var today=new Date();
var todaymonth=today.getMonth();
var todayyear=today.getFullYear();
if(no=="")
alert("Please enter credit card number!");
else
if(name=="")
alert("Please enter card holder's name!");
else
if(todayyear==year)
{
if(todaymonth>month)
alert("Select a valid expiry date!");
}
if(type=="MasterCard")
{
flag=mastercardvalidation(no);
}
else
if(type=="Visa")
flag=visacardvalidation(no);
else
if(type=="AmericanExpress")
flag=americanexpressvalidation(no);
if(flag)
{
alert("Valid card number");
return true;
}
return false;
}
function americanexpressvalidation(no)
{
var cardno = /^(?:3[47][0-9]{13})$/;
if(no.match(cardno))
{
return true;
}
else
{
alert("Not a valid Amercican Express credit card number! Either select a different card type or provide a valid card no.");
return false;
}
}
function visacardvalidation(no)
{
var cardno = /^(?:4[0-9]{12}(?:[0-9]{3})?)$/;
if(no.match(cardno))
{
return true;
}
else
{
alert("Not a valid Visa credit card number! Either select a different card type or provide a valid card no.");
return false;
}
}
function mastercardvalidation(no)
{
var cardno = /^(?:5[1-5][0-9]{14})$/;
if(no.match(cardno))
{
return true;
}
else
{
alert("Not a valid Mastercard number! Either select a different card type or provide a valid card no.");
return false;
}
}
var monthtext=['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sept','Oct','Nov','Dec'];
function populatedropdown(monthfield, yearfield){
var today=new Date()
var monthfield=document.getElementById(monthfield)
var yearfield=document.getElementById(yearfield)
for (var m=0; m<12; m++)
monthfield.options[m]=new Option(monthtext[m],m)
monthfield.options[today.getMonth()]=new Option(monthtext[today.getMonth()], today.getMonth(), true, true) //select today's month
var thisyear=today.getFullYear()
for (var y=0; y<20; y++){
yearfield.options[y]=new Option(thisyear, thisyear)
thisyear+=1
}
yearfield.options[0]=new Option(today.getFullYear(), today.getFullYear(), true, true) //select today's year
}
</script>
</head>
<br><body>
<div class="mail">
<form name="form1" action=" http://ss1.ciwcertified.com/cgi-bin/process.pl">
<table>
<tr><td>Card Type:
<td><select id="cardtype">
<option value="MasterCard">MasterCard</option>
<option value="Visa">Visa</option>
<option value="AmericanExpress">AmericanExpress</option>
</select>
</td>
</tr>
<tr><td>Card No:
<td><input id="cardno"></td>
</tr>
<tr><td>Card Holder Name:
<td><input id="cardname"></td>
</tr>
<tr><td>Expiry Date:
<td><select id="monthdropdown"></select>
<select id="yeardropdown"></select>
</td>
</tr>
<tr><td colspan=2 align=center>
<input type="Submit" value="Submit"/></tr>
</table>
</form>
</div>
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.