|
JavaScript - Credit Card
Hi all,
Im trying to get this working for my Website i have seen alot of Credit Card code both JS and Jquery I have came across one that i really like all the user has to do is enter in his Card Number and it will auto detect what type of card he/she has . Code: <input id="ccNumber" onChange="SetTypeText(this.value)" />
<br />
<div id="cardType"></div>
Code: <script type="text/javascript">
function SetTypeText(number)
{
var typeField = document.getElementById("cardType");
typeField.innerHTML = GetCardType(number);
}
function GetCardType(number)
{
var re = new RegExp("^4");
if (number.match(re) != null)
return "Visa";
re = new RegExp("^(34|37)");
if (number.match(re) != null)
return "American Express";
re = new RegExp("^5[1-5]");
if (number.match(re) != null)
return "MasterCard";
re = new RegExp("^6011");
if (number.match(re) != null)
return "Discover";
return "";
}
</script>
But cant seem how i could place in code to see if the card is valid or invalid as alot of the source code out their is using Selection and Arrays.. Does any one know how i could get Validation done with the auto Detect Card code ? Code: cards [0] = {cardName: "Visa", lengths: "13,16", prefixes: "4", checkdigit: true};
cards [1] = {cardName: "MasterCard", lengths: "16", prefixes: "51,52,53,54,55", checkdigit: true};
cards [2] = {cardName: "DinersClub", lengths: "14,16", prefixes: "300,301,302,303,304,305,36,38,55", checkdigit: true};
cards [3] = {cardName: "CarteBlanche", lengths: "14", prefixes: "300,301,302,303,304,305,36,38", checkdigit: true};
cards [4] = {cardName: "AmEx", lengths: "15", prefixes: "34,37", checkdigit: true};
cards [5] = {cardName: "Discover", lengths: "16", prefixes: "6011,650", checkdigit: true};
cards [6] = {cardName: "JCB", lengths: "15,16", prefixes: "3,1800,2131", checkdigit: true};
cards [7] = {cardName: "enRoute", lengths: "15", prefixes: "2014,2149", checkdigit: true};
cards [8] = {cardName: "Solo", lengths: "16,18,19", prefixes: "6334, 6767", checkdigit: true};
cards [9] = {cardName: "Switch", lengths: "16,18,19", prefixes: "4903,4905,4911,4936,564182,633110,6333,6759", checkdigit: true};
cards [10] = {cardName: "Maestro", lengths: "16,18", prefixes: "5020,6", checkdigit: true};
cards [11] = {cardName: "VisaElectron", lengths: "16", prefixes: "417500,4917,4913", checkdigit: true};
var cardType = -1;
for (var i=0; i<cards.length; i++) {
if (cardName.toLowerCase() == cards[i].cardName.toLowerCase()) {
cardType = i;
break;
}
}
if (cardType == -1) { return false; } // card type not found
value = value.replace (/[\s-]/g, ""); // remove spaces and dashes
if (value.length == 0) { return false; } // no length
var cardNo = value;
var cardexp = /^[0-9]{13,19}$/;
if (!cardexp.exec(cardNo)) { return false; } // has chars or wrong length
cardNo = cardNo.replace(/\D/g, ""); // strip down to digits
if (cards[cardType].checkdigit){
var checksum = 0;
var mychar = "";
var j = 1;
var calc;
for (i = cardNo.length - 1; i >= 0; i--) {
calc = Number(cardNo.charAt(i)) * j;
if (calc > 9) {
checksum = checksum + 1;
calc = calc - 10;
}
checksum = checksum + calc;
if (j ==1) {j = 2} else {j = 1};
}
if (checksum % 10 != 0) { return false; } // not mod10
}
var lengthValid = false;
var prefixValid = false;
var prefix = new Array ();
var lengths = new Array ();
prefix = cards[cardType].prefixes.split(",");
for (i=0; i<prefix.length; i++) {
var exp = new RegExp ("^" + prefix[i]);
if (exp.test (cardNo)) prefixValid = true;
}
if (!prefixValid) { return false; } // invalid prefix
lengths = cards[cardType].lengths.split(",");
for (j=0; j<lengths.length; j++) {
if (cardNo.length == lengths[j]) lengthValid = true;
}
if (!lengthValid) { return false; } // wrong length
return true;
}, jQuery.validator.messages.creditcard);
Similar TutorialsHere's another problem I'm having, I have to validate credit card types. My code worked originally. I simply checked the prefix for each type then verified the length with an if statement. However, I decided to change the code so that only numbers would work after the prefix (as the old code would have allowed any character). This is the code I have: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Credit Card Validation</title>
<link rel="stylesheet" type="text/css" href="default.css" />
<script type="text/javascript">
function checkCC(myForm)
{
var ccType;
var ccLength;
var ccNum = myForm.cardNum.value;
if (myForm.cardType.selectedIndex == 0)
{
ccType = "Visa";
}
else if (myForm.cardType.selectedIndex == 1)
{
ccType = "MasterCard"
}
else if (myForm.cardType.selectedIndex == 2)
{
ccType = "AmericanExpress"
}
switch(ccType)
{
case "Visa":
{
valid = /^4\d{12}(?:\d{3})?$/;
if (valid.test(myForm.cardNum.value))
{
alert("This is a Valid Visa Card");
return true;
}
else
{
alert("This Card Number is Invalid For Visa");
return false;
}
break;
}
case "MasterCard":
{
valid = /^5[1-5]\d{14}$/;
if (valid.test(myForm.cardNum.value))
{
alert("This is a Valid MasterCard Card");
}
else
{
alert("This Card Number is Invalid For MasterCard");
}
break;
}
case "AmericanExpress":
{
valid = /^3[47]\d{13}$/;
if (valid.test(myForm.cardNum.value))
{
alert("This is a Valid American Express Card");
//return true;
}
else
{
alert("This Card Number is Invalid For American Express");
//return false;
}
break;
}
default:
myForm.cardNum.value = null;
alert("Card type not found");
return false;
}
}
</script>
</head>
<body>
<h1>Credit Card Validator</h1>
<table>
<form name="creditCard">
<tr>
<td><span class="labels">Card Type:</span></td>
<td>
<select name="cardType" size="3">
<option name="visa">Visa</option>
<option name="mc">Master Card</option>
<option name="amex">American Express</option>
</select>
</td>
<tr>
<td><span class="labels">Card Number:</span></td>
<td><input name="cardNUm" type="text" size=30 value="" /></td>
</tr>
<tr><td colspan="2"> </td></tr>
<tr>
<td>
<input type="button" value="Death to All"
style="background-color:#666666 !important"
onclick="return(checkCC(this.form,))" />
</td>
</tr>
</form>
</table>
</body>
</html>
Upon pressing the button nothing happens, I'm completely unsure where I went wrong as all the code seems valid... Please help. Thanks in advance. Starting off by saying this is directly from a book: Code: <script type="text/javascript">
/* <![CDATA[ */
function validateCard(){
//American Express
if(document.forms[0].cardName.value
=="American Express"){
var cardProtocol = new RegExp("^3[47][0-9]{13}$");
if(cardProtocol.test(document.forms[0]
.cardNumber.value))
document.forms[0].ccResult.value
="Valid credit card number";
else
document.forms[0].ccResult.value
="Invalid credit card number";
}
//Diners Club
else if(document.forms[0].cardName.value
=="Diners Club"){
var cardProtocol = new RegExp("^3(?:0[0-5]|[68][0-9])[0-9]{11}$");
if(cardProtocol.test(document.forms[0]
.cardNumber.value))
document.forms[0].ccResult.value
="Valid credit card number";
else
document.forms[0].ccResult.value
="Invalid credit card number";
}
//Discover
else if(document.forms[0].cardName.value
=="Discover"){
var cardProtocol = new RegExp("^6(?:011|5[0-9]{2})[0-9]{12}$");
if(cardProtocol.test(document.forms[0]
.cardNumber.value))
document.forms[0].ccResult.value
="Valid credit card number";
else
document.forms[0].ccResult.value
="Invalid credit card number";
}
//JCB
else if(document.forms[0].cardName.value
=="JCB"){
var cardProtocol = new RegExp("^(?:2131|1800|35\d{3})\d{11}$");
if(cardProtocol.test(document.forms[0]
.cardNumber.value))
document.forms[0].ccResult.value
="Valid credit card number";
else
document.forms[0].ccResult.value
="Invalid credit card number";
}
//Mastercard
else if(document.forms[0].cardName.value
=="Mastercard"){
var cardProtocol = new RegExp("^5[1-5][0-9]{14}$");
if(cardProtocol.test(document.forms[0]
.cardNumber.value))
document.forms[0].ccResult.value
="Valid credit card number";
else
document.forms[0].ccResult.value
="Invalid credit card number";
}
//Visa
else if(document.forms[0].cardName.value
=="Visa"){
var cardProtocol = new RegExp("^4[0-9]{12}(?:[0-9]{3})?$");
if(cardProtocol.test(document.forms[0]
.cardNumber.value))
document.forms[0].ccResult.value
="Valid credit card number";
else
document.forms[0].ccResult.value
="Invalid credit card number";
}
}
/* ]]> */
</script>
With a drop down box for the card type and a text-box to input a credit card number of appropriate length. My question, the teacher asked us to help make this code more "efficient" and I'm still learning the language, and was wondering if a loop could be utilized to make the code more efficient? Switch statement would just repeat the code practically I am tired and fatigued, but I don't believe enough to not find obvious mistakes. I'm having a very strange issue that I have not encounted where a HTML form is submitting when just the first two INPUT's are filled in, but it shouldn't be able to submit because there are still other INPUT boxes that are empty and required to be filled for JavaScript to allow the form to submit. Can anyone see what the problem is? Code: <SCRIPT type="text/javascript">
function validateForm() {
if (document.forms["form"]["cardholdername"].value=="") {
alert ("Cannot proceed to purchase because a Visa card name has not been specified.");
return false;
}
if (document.forms["form"]["cardnumber"].value=="") {
alert ("Cannot proceed to purchase because a Visa card number has not been specified.");
return false;
}
if (document.forms["form"]["cardexpirymonth"].value=="") {
alert ("Cannot proceed to purchase because a Visa card expiry month has not been selected.");
return false;
}
if (document.forms["form"]["cardexpiryyear"].value=="") {
alert ("Cannot proceed to purchase because a Visa card expiry year has not been selected.");
return false;
}
if (document.forms["form"]["cardcvv"].value=="") {
alert ("Cannot proceed to purchase because a Visa card CVV has not been specified.");
return false;
}
if (document.forms["form"]["cardholdere-mailaddress"].value=="") {
alert ("Cannot proceed to purchase because a Visa card holder e-mail address has not been specified.");
return false;
}
if (document.forms["form"]["cardholdercontactnumber"].value=="") {
alert ("Cannot proceed to purchase because a Visa card holder contact number has not been specified.");
return false;
}
}
</SCRIPT>
Code: <FORM action="processpaymentinformation.html" method="post" name="form" onsubmit="return validateForm()"> <DIV class="payment"> <DIV class="visacard"><B>Visa card:</B></DIV> <BR> <DIV class="cardholdername"><B>Name:</B> <INPUT name="cardholdername" type="text"></DIV> <DIV class="cardnumber"><B>Number:</B> <INPUT name="cardnumber" type="text"></DIV> <DIV class="cardexpirymonth"><B>Expiry month:</B> <SELECT name="cardexpirymonth"> <OPTION></OPTION> <OPTION>01</OPTION> <OPTION>02</OPTION> <OPTION>03</OPTION> <OPTION>04</OPTION> <OPTION>05</OPTION> <OPTION>06</OPTION> <OPTION>07</OPTION> <OPTION>08</OPTION> <OPTION>09</OPTION> <OPTION>10</OPTION> <OPTION>11</OPTION> <OPTION>12</OPTION> </SELECT> </DIV> <DIV class="cardexpiryyear"><B>Expiry year:</B> <SELECT name="cardexpirymonth"> <OPTION></OPTION> <OPTION>13</OPTION> <OPTION>14</OPTION> <OPTION>15</OPTION> <OPTION>16</OPTION> <OPTION>17</OPTION> </SELECT> </DIV> <DIV class="cardcvv"><B>CVV:</B> <INPUT class="cardcvv" name="cardcvv" type="password"></DIV> <BR> <BR> <DIV class="visacardholder"><B>Visa card holder:</B></DIV> <BR> <DIV class="cardholdertitle"><B>Title:</B> <SELECT name="cardholdertitle"> <OPTION></OPTION> <OPTION>Dr</OPTION> <OPTION>Madam</OPTION> <OPTION>Miss</OPTION> <OPTION>Mr</OPTION> <OPTION>Mrs</OPTION> <OPTION>Ms</OPTION> <OPTION>Sir</OPTION> </SELECT> </DIV> <DIV class="cardholdere-mailaddress"><B>E-mail address:</B> <INPUT name="cardholdere-mailaddress" type="text"></DIV> <B>Contact number:</B> <INPUT name="cardholdercontactnumber" type="text"> </DIV> <DIV> <INPUT class="submit" type="submit" value="PROCEED TO PURCHASE"> </DIV> </FORM> I would like help because I cannot find the error in my code. js code Code: function luhnCheckSum(sCardNum) {
var iOddSum = 0;
var iEvenSum = 0;
var bIsOdd = true;
for (var i=sCardNum.length-1; i >= 0; i--) {
var iNum = parseInt(sCardNum.charAt(i));
if (bIsOdd) {
iOddSum += iNum;
} else {
iNum = iNum * 2;
if (iNum > 9) {
iNum = eval(iNum.toString().split("").join("+"));
}
iEvenSum += iNum;
}
bIsOdd = !bIsOdd;
}
return ((iEvenSum + iOddSum) % 10 == 0);
}
function isValidVisa(sText) {
var reVisa = /^(4\d{12}(?:\d{3})?)$/;
if (reVisa.test(sText)) {
alert("Please enter a Card Number.");
clock.CardNumber.focus();
return luhnCheckSum(RegExp.$1);
} else {
alert("This card number is not valid.");
return false;
}
}
html Code: <input type="text" size="16" name="Card_Number" onmouseout="isValidVisa(this)"/> Hi there, basically i have created a simple card game, i have one html page with 6 decks of cards. The decks are just images that when clicked display 6 other cards on another html page. What i want to do is that when i click a card on the second page i want the card to be removed, so that when i go back the first page and select the same deck again, the second page opens and the card i had selected before is still removed? Is this possible with javascript please i am totally new to it. Please could someone give me some direction? Thanks
Hey. I am looking for a gallery/image slider script that looking like this image/or does the same as the image below: Something like that or similar if anyone knows a link to one or knows the code please help. Thanks for reading. Mark. |
|||||||