Hi, i am making a payment detail form which required user to put the detail of their credit card as well as the expiry month and year for the credit card.
The "expiry month" and "expiry year" field is separated into different fields.
The validator should check that the expiry month and year that the user enters is in the future.
I don't have any idea on how to do this.
Can anyone help?
I wonder if the "expiry month" should be entered by digits range from 1-12 or just a drop down menu which list "january-december".
Here is my code:
<html>
<head>
<title>JQuery FOrm Test</title>
<style type="text/css">
body { font: 11px/15px verdana, arial, helvetica, sans-serif; }
.center { text-align:center; font-style:bold; }
.center_button { display:block;
margin-left: auto;
margin-right: auto; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"
type="text/javascript">
</script>
<script type="text/javascript">
function validate()
{
var compulsory_fields= new Array("credit card number","owner","expiry month","expiry year","security code");
for (i=0; i< compulsory_fields.length; i++)
{
if (document.getElementById(compulsory_fields[i]).value=="")
{
alert("Please enter "+compulsory_fields[i]);
return false;
}
}
var owner = document.getElementById("owner").value;
var allalphabet = false;
allalphabet = /^\s*[a-zA-z]+\s*$/.test(owner);
if (allalphabet == false)
{
alert("Owner must consist of alphabets only");
return false;
}
var compulsory_digits= new Array("credit card number","expiry month","expiry year","security code");
for (i=0; i< compulsory_digits.length; i++)
{
var alldigits = document.getElementById(compulsory_digits[i]).value;
var alldig = false;
alldig = /^\s*\d+\s*$/.test(alldigits);
if (alldig == false)
{
alert(compulsory_digits[i] +" must consist of digits only");
return false;
}
}
var cclength = document.getElementById("credit card number").value;
if (cclength.length != 12)
{
alert("Credit Card Number must consist of 12 digits");
return false;
}
var month = document.getElementById("expiry month").value;
if (month.length != 2)
{
alert("Expiry Month must consist of 2 digits");
return false;
}
var year = document.getElementById("expiry year").value;
if (year.length != 4)
{
alert("Expiry Year must consist of 4 digits");
return false;
}
var security = document.getElementById("security code").value;
if (security.length != 3)
{
alert("Security code must consist of 3 digits");
return false;
}
return true;
}
</script>
</head>
<body>
<form action="demo.php" method="post" onsubmit="return validate()">
<table border="1">
<tr><td colspan="2" class="center">Complete Booking - Stage 2 of 4 - Payment Details</td></tr>
<tr><td style="width:250px;">Credit Card Type<span style="color:red">*</span></td>
<td><select name="credit card type">
<option value="Visa">Visa</option>
<option value="Diners">Diners</option>
<option value="Mastercard">Mastercard</option>
<option value="Amex">Amex</option>
</select></td></tr>
<tr><td>Credit Card Number<span style="color:red">*</span></td><td><input type="text" name="credit card number" id="credit card number"></td></tr>
<tr><td>Owner<span style="color:red">*</span></td><td><input type="text" name="owner" id="owner"></td></tr>
<tr><td>Expiry Month<span style="color:red">*</span></td><td><input type="text" name="expiry month" id="expiry month"></td></tr>
<tr><td>Expiry Year<span style="color:red">*</span></td><td><input type="text" name="expiry year" id="expiry year"></td></tr>
<tr><td>Security Code<span class="asterix" style="color:red">*</span></td><td><input type="text" name="security code" id="security code"></td></tr>
</table>
<table style="width:350px;">
<tr><td><input class="center_button" type="submit" name="submit" value="Stage 3 - Review Bookings and Details"></td></tr>
</table>
</form>
</body>
</html>Thanks