wmguk Posted March 17, 2008 Share Posted March 17, 2008 Hey, I already added this help request in javascript, but as this is used on a php page I thought maybe someone might notice the issue here... I am using a creditcard validation script, the script will pop up to tell you there is an error, but it still submits the page... any ideas? this is in the head, before a style code <script type="text/javascript" src="creditcard.js"></script> <script type="text/javascript"> <!-- function testCreditCard () { if (checkCreditCard (document.getElementById('payee_cardNum').value,document.getElementById('payee_cardType').value)) { alert ("Credit card has a valid format") } else {alert (ccErrors[ccErrorNo])}; } //--> </script> my submit button <input type="submit" name="pay" id="pay" value="Make Payment" onclick="testCreditCard();" /> my creditcard.js /*============================================================================*/ /* This routine checks the credit card number. The following checks are made: 1. A number has been provided 2. The number is a right length for the card 3. The number has an appropriate prefix for the card 4. The number has a valid modulus 10 number check digit if required If the validation fails an error is reported. The structure of credit card formats was gleaned from a variety of sources on the web, although the best is probably on Wikepedia ("Credit card number"): http://en.wikipedia.org/wiki/Credit_card_number Parameters: cardnumber number on the card cardname name of card as defined in the card list below Author: John Gardner Date: 1st November 2003 Updated: 26th Feb. 2005 Additional cards added by request Updated: 27th Nov. 2006 Additional cards added from Wikipedia Updated: 18th Jan. 2008 Additional cards added from Wikipedia */ /* If a credit card number is invalid, an error reason is loaded into the global ccErrorNo variable. This can be be used to index into the global error string array to report the reason to the user if required: e.g. if (!checkCreditCard (number, name) alert (ccErrors(ccErrorNo); */ var ccErrorNo = 0; var ccErrors = new Array () ccErrors [0] = "Unknown card type"; ccErrors [1] = "No card number provided"; ccErrors [2] = "Credit card number is in invalid format"; ccErrors [3] = "Credit card number is invalid"; ccErrors [4] = "Credit card number has an inappropriate number of digits"; function checkCreditCard (cardnumber, cardname) { // Array to hold the permitted card characteristics var cards = new Array(); // Define the cards we support. You may add addtional card types. // Name: As in the selection box of the form - must be same as user's // Length: List of possible valid lengths of the card number for the card // prefixes: List of possible prefixes for the card // checkdigit Boolean to say whether there is a check digit cards [0] = {name: "Visa", length: "13,16", prefixes: "4", checkdigit: true}; cards [1] = {name: "MasterCard", length: "16", prefixes: "51,52,53,54,55", checkdigit: true}; cards [2] = {name: "Solo", length: "16,18,19", prefixes: "6334, 6767", checkdigit: true}; cards [3] = {name: "Switch", length: "16,18,19", prefixes: "4903,4905,4911,4936,564182,633110,6333,6759", checkdigit: true}; cards [4] = {name: "Maestro", length: "16,18", prefixes: "5020,6", checkdigit: true}; cards [5] = {name: "VisaElectron", length: "16", prefixes: "417500,4917,4913", checkdigit: true}; // Establish card type var cardType = -1; for (var i=0; i<cards.length; i++) { // See if it is this card (ignoring the case of the string) if (cardname.toLowerCase () == cards[i].name.toLowerCase()) { cardType = i; break; } } // If card type not found, report an error if (cardType == -1) { ccErrorNo = 0; return false; } // Ensure that the user has provided a credit card number if (cardnumber.length == 0) { ccErrorNo = 1; return false; } // Now remove any spaces from the credit card number cardnumber = cardnumber.replace (/\s/g, ""); // Check that the number is numeric var cardNo = cardnumber var cardexp = /^[0-9]{13,19}$/; if (!cardexp.exec(cardNo)) { ccErrorNo = 2; return false; } // Now check the modulus 10 check digit - if required if (cards[cardType].checkdigit) { var checksum = 0; // running checksum total var mychar = ""; // next char to process var j = 1; // takes value of 1 or 2 // Process each digit one by one starting at the right var calc; for (i = cardNo.length - 1; i >= 0; i--) { // Extract the next digit and multiply by 1 or 2 on alternative digits. calc = Number(cardNo.charAt(i)) * j; // If the result is in two digits add 1 to the checksum total if (calc > 9) { checksum = checksum + 1; calc = calc - 10; } // Add the units element to the checksum total checksum = checksum + calc; // Switch the value of j if (j ==1) {j = 2} else {j = 1}; } // All done - if checksum is divisible by 10, it is a valid modulus 10. // If not, report an error. if (checksum % 10 != 0) { ccErrorNo = 3; return false; } } // The following are the card-specific checks we undertake. var LengthValid = false; var PrefixValid = false; var undefined; // We use these for holding the valid lengths and prefixes of a card type var prefix = new Array (); var lengths = new Array (); // Load an array with the valid prefixes for this card prefix = cards[cardType].prefixes.split(","); // Now see if any of them match what we have in the card number for (i=0; i<prefix.length; i++) { var exp = new RegExp ("^" + prefix[i]); if (exp.test (cardNo)) PrefixValid = true; } // If it isn't a valid prefix there's no point at looking at the length if (!PrefixValid) { ccErrorNo = 3; return false; } // See if the length is valid for this card lengths = cards[cardType].length.split(","); for (j=0; j<lengths.length; j++) { if (cardNo.length == lengths[j]) LengthValid = true; } // See if all is OK by seeing if the length was valid. We only check the // length if all else was hunky dory. if (!LengthValid) { ccErrorNo = 4; return false; }; // The credit card is in the required format. return true; } /*============================================================================*/ Quote Link to comment Share on other sites More sharing options...
EKINdesigns Posted March 17, 2008 Share Posted March 17, 2008 I believe you need to return false in order to stop the submit. i think you can also place void(0) in the onclick command, then submit the form in javascript if its validated. Quote Link to comment Share on other sites More sharing options...
wmguk Posted March 17, 2008 Author Share Posted March 17, 2008 I believe you need to return false in order to stop the submit. i think you can also place void(0) in the onclick command, then submit the form in javascript if its validated. Hi, Thanks for the response I thought that about the false, but in the .js file it appears to return false correctly, and I cant see anywhere else it would need to return false? Quote Link to comment Share on other sites More sharing options...
EKINdesigns Posted March 17, 2008 Share Posted March 17, 2008 Try in the actual function above. <!-- function testCreditCard () { if (checkCreditCard (document.getElementById('payee_cardNum').value,document.getElementById('payee_cardType').value)) { alert ("Credit card has a valid format") } else { alert (ccErrors[ccErrorNo]); return false; }; } //--> Give that a go. Quote Link to comment Share on other sites More sharing options...
wmguk Posted March 18, 2008 Author Share Posted March 18, 2008 hey, i editted the page, i now have this <html> <head> <script type="text/javascript" src="creditcard.js"></script> <script type="text/javascript"> <!-- function testCreditCard () { if (checkCreditCard (document.getElementById('payee_cardNum').value,document.getElementById('payee_cardType').value)) { alert ("Credit card has a valid format") } else { alert (ccErrors[ccErrorNo]); return false; }; } --> </script> <STYLE TYPE='text/css'> H1{color:#999999; font-size:16pt; font-family:Century Gothic,Arial,Helvetica,sans-serif; font-weight:bold; } .MainText{line-height:pt; text-align:left; font-style:normal; color:#515054; font-size:10pt; font-family:Century Gothic,Arial,Helvetica,sans-serif; font-weight:normal; } .formnames{text-align:left; font-style:normal; color:#515054; font-size:9pt; font-family:Century Gothic,Arial,Helvetica,sans-serif; font-weight:normal; } .warning{color:#CC0000; background-color:#ffffff; font-size:9pt; font-family:Century Gothic,Arial,Helvetica,sans-serif; font-weight:bold; } .result{color:#515054; font-size:10pt; font-family:Century Gothic,Arial,Helvetica,sans-serif; font-weight:bold; } INPUT{font-family:Century Gothic,Arial,Helvetica,sans-serif; font-style:normal; color:#000000; font-size:9pt; font-weight:normal; } SELECT{font-family:Century Gothic,Arial,Helvetica,sans-serif; font-style:normal; color:#000000; font-size:9pt; font-weight:normal; } OPTION{font-family:Century Gothic,Arial,Helvetica,sans-serif; font-style:normal; color:#000000; font-size:9pt; font-weight:normal; } TEXTAREA{font-family:Century Gothic,Arial,Helvetica,sans-serif; font-style:normal; color:#000000; font-size:9pt; font-weight:normal; } A{color:#666666; font-family:Century Gothic; font-size:10pt; font-weight:normal; text-decoration:underline; } A:Visited{color:#666666; font-family:Century Gothic; font-size:10pt; font-weight:normal; text-decoration:underline; } A:Hover{color:#666666; font-family:Century Gothic; font-size:10pt; font-weight:normal; text-decoration:none; } </STYLE></head><body> Then the actual button is: <input type="submit" name="pay" id="pay" value="Make Payment" onClick="testCreditCard();" /> the creditcard.js file is: /*============================================================================*/ /* This routine checks the credit card number. The following checks are made: 1. A number has been provided 2. The number is a right length for the card 3. The number has an appropriate prefix for the card 4. The number has a valid modulus 10 number check digit if required If the validation fails an error is reported. The structure of credit card formats was gleaned from a variety of sources on the web, although the best is probably on Wikepedia ("Credit card number"): http://en.wikipedia.org/wiki/Credit_card_number Parameters: cardnumber number on the card cardname name of card as defined in the card list below Author: John Gardner Date: 1st November 2003 Updated: 26th Feb. 2005 Additional cards added by request Updated: 27th Nov. 2006 Additional cards added from Wikipedia Updated: 18th Jan. 2008 Additional cards added from Wikipedia */ /* If a credit card number is invalid, an error reason is loaded into the global ccErrorNo variable. This can be be used to index into the global error string array to report the reason to the user if required: e.g. if (!checkCreditCard (number, name) alert (ccErrors(ccErrorNo); */ var ccErrorNo = 0; var ccErrors = new Array () ccErrors [0] = "Unknown card type"; ccErrors [1] = "No card number provided"; ccErrors [2] = "Credit card number is in invalid format"; ccErrors [3] = "Credit card number is invalid"; ccErrors [4] = "Credit card number has an inappropriate number of digits"; function checkCreditCard (cardnumber, cardname) { // Array to hold the permitted card characteristics var cards = new Array(); // Define the cards we support. You may add addtional card types. // Name: As in the selection box of the form - must be same as user's // Length: List of possible valid lengths of the card number for the card // prefixes: List of possible prefixes for the card // checkdigit Boolean to say whether there is a check digit cards [0] = {name: "Visa", length: "13,16", prefixes: "4", checkdigit: true}; cards [1] = {name: "MasterCard", length: "16", prefixes: "51,52,53,54,55", checkdigit: true}; cards [2] = {name: "Solo", length: "16,18,19", prefixes: "6334, 6767", checkdigit: true}; cards [3] = {name: "Switch", length: "16,18,19", prefixes: "4903,4905,4911,4936,564182,633110,6333,6759", checkdigit: true}; cards [4] = {name: "Maestro", length: "16,18", prefixes: "5020,6", checkdigit: true}; cards [5] = {name: "VisaElectron", length: "16", prefixes: "417500,4917,4913", checkdigit: true}; // Establish card type var cardType = -1; for (var i=0; i<cards.length; i++) { // See if it is this card (ignoring the case of the string) if (cardname.toLowerCase () == cards[i].name.toLowerCase()) { cardType = i; break; } } // If card type not found, report an error if (cardType == -1) { ccErrorNo = 0; return false; } // Ensure that the user has provided a credit card number if (cardnumber.length == 0) { ccErrorNo = 1; return false; } // Now remove any spaces from the credit card number cardnumber = cardnumber.replace (/\s/g, ""); // Check that the number is numeric var cardNo = cardnumber var cardexp = /^[0-9]{13,19}$/; if (!cardexp.exec(cardNo)) { ccErrorNo = 2; return false; } // Now check the modulus 10 check digit - if required if (cards[cardType].checkdigit) { var checksum = 0; // running checksum total var mychar = ""; // next char to process var j = 1; // takes value of 1 or 2 // Process each digit one by one starting at the right var calc; for (i = cardNo.length - 1; i >= 0; i--) { // Extract the next digit and multiply by 1 or 2 on alternative digits. calc = Number(cardNo.charAt(i)) * j; // If the result is in two digits add 1 to the checksum total if (calc > 9) { checksum = checksum + 1; calc = calc - 10; } // Add the units element to the checksum total checksum = checksum + calc; // Switch the value of j if (j ==1) {j = 2} else {j = 1}; } // All done - if checksum is divisible by 10, it is a valid modulus 10. // If not, report an error. if (checksum % 10 != 0) { ccErrorNo = 3; return false; } } // The following are the card-specific checks we undertake. var LengthValid = false; var PrefixValid = false; var undefined; // We use these for holding the valid lengths and prefixes of a card type var prefix = new Array (); var lengths = new Array (); // Load an array with the valid prefixes for this card prefix = cards[cardType].prefixes.split(","); // Now see if any of them match what we have in the card number for (i=0; i<prefix.length; i++) { var exp = new RegExp ("^" + prefix[i]); if (exp.test (cardNo)) PrefixValid = true; } // If it isn't a valid prefix there's no point at looking at the length if (!PrefixValid) { ccErrorNo = 3; return false; } // See if the length is valid for this card lengths = cards[cardType].length.split(","); for (j=0; j<lengths.length; j++) { if (cardNo.length == lengths[j]) LengthValid = true; } // See if all is OK by seeing if the length was valid. We only check the // length if all else was hunky dory. if (!LengthValid) { ccErrorNo = 4; return false; }; // The credit card is in the required format. return true; } /*============================================================================*/ any thoughts? Quote Link to comment Share on other sites More sharing options...
wmguk Posted March 18, 2008 Author Share Posted March 18, 2008 bump? Quote Link to comment Share on other sites More sharing options...
wmguk Posted March 19, 2008 Author Share Posted March 19, 2008 sorry to keep on about this, but its totally got me stumped Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.