Today we will try and do a basic client-side credit card validation. Here is the task list to do the same
Task 1: Open notepad to type in your HTML file
Task 2: HTML file starts with the HTML tag (<html>)
Task3: Before actually submitting the data it would be nice, if we can validate if the Name and Expiry date has some value in it. We can do this using client-side scripting. Here we are writing a validate() method in JavaScript, to implement this client-side validation.
Task 4: We need to write client-side program for validating the credit card. We can only implement basic credit card validation on the client side, like checking the length of the input, checking the first 4 digits of the card no. To validate the credit card on the client-side we need to write a function, which checks
Task 4 a: If the user has entered any input
Task 4 b: If the user has entered a value which is an integer
Task 4 c: If the user has entered 16 digits
Task 4 d: After checking the input, we have to check if the first 4 digits are valid.
Task 5: We need to create the HTML form which can take in the user value, which we can validate using the JavaScript function.
Note: (Do not include the text inside the curly brackets)
{Task 2}
<html>
<head>
<title>Credit Card Validation</title>
{Task 3}
<script language="Javascript">
function validate() {
var myName = myform.Name.value;
var myExpiryDate = myform.ExpiryDate.value;
if (myName == ""){
alert("You
haven't entered a any value for Name");
return
false;
}
if (myExpiryDate == ""){
alert("You
haven't entered a any value for Expiry Date");
return
false;
}
{Task 4 a}
var myCardNo = myform.CardNo.value;
if (myCardNo == ""){
alert("You
haven't entered ANY value for the Credit card");
return
false;
}
else
{
{Task 4 b}
if
(myCardNo < 1)
{
alert("You
haven't entered a VALID value for the Credit card");
return
false;
}
else
{
{Task 4 c}
if
(myCardNo.length < 16 || myCardNo.length
> 16)
{
alert("You
haven't entered the CORRECT NO of digits for the Credit card");
return
false;
}
else
{
{Task 4 d}
if(myCardNo.substr(0,4) =="4670" || myCardNo.substr(0,4) == "4030" || myCardNo.substr(0,4) == "4546" || myCardNo.substr(0,4)
== "5412")
{
document.write("<h1>Your
credit card no has been validated</h1>")
}
else
{
alert("You
haven't entered a valid value for the Credit card");
return
false;
}
}
}
}
}
</script>
</head>
{Task 5}
<body>
<h1><font color="#000080">Credit Card
Validation Module</font></h1>
<form name="myform" method="POST">
<table border="0" width="45%">
<tr>
<td width="50%">
<b>Name</b>
</td>
<td width="50%">
<input type="text" name="Name" size="20">
</td>
</tr>
<tr>
<td width="50%">
<b>Credit Card No </b>
</td>
<td width="50%">
<input type="text" name="CardNo" size="20">
</td>
</tr>
<tr>
<td width="50%">
<b>Expiry Date</b>
</td>
<td width="50%">
<input type="text" name="ExpiryDate" size="20">
</td>
</tr>
<tr>
<td width="100%" colspan="2">
<p align="center">
<input
type="button" value="submit" onClick="javascript:validate()" >
</td>
</tr>
</table>
</form>
</body>
To make the page a little more
informational you could add a little bit of text to the error messages, to help
the user. Save the file in your
home-space and name it 'credit_card_validation.html ', you can
test your HTML file by opening it in a browser. Test it for no input value and
some different values of the credit card to make sure that your validation
function is actually working.
{Task 6}
Once you have done all the above validation, It would be better that you add another field in the HTML form, which could be the Security Code, and you could implement a client-side script to validate that Security code, so that the user enters some value in the field.