Solved

JQuery validation additional methods - Can't get creditcardtypes to validate numbers

Posted on 2014-04-27
4
649 Views
Last Modified: 2014-04-30
Title says it all.  The regular creditcard:true method works fine but we don't process all the cards it checks, so I need to be able to restrict to Visa, MC, Amex and Discover - so I turned to the creditcardtypes method in the additionalMethods file and edited it to only check for those 4 cards.

But, it isn't validating anything - at least in the way I've edited it.  I know I'm doing something wrong but can't see what it is. I've created a test page with the issue and have attached it here.

As always, any help would be greatly appreciated.

test.php
0
Comment
Question by:saabStory
  • 2
4 Comments
 
LVL 16

Expert Comment

by:hankknight
ID: 40026061
0
 
LVL 16

Assisted Solution

by:hankknight
hankknight earned 250 total points
ID: 40026076
Here is a working example:
<!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" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
        <script type="text/javascript" src="http://jquerycreditcardvalidator.com/jquery.creditCardValidator.js"></script>
        <script type="text/javascript">
         $(document).ready(function () {
          $('#theForm').submit(function () {
           $('#ccNum').validateCreditCard(function(result){
            if(!result || !result.card_type || (result.card_type!='visa' && result.card_type!='mastercard' && result.card_type!='amex' && result.card_type=='discover' ))
              alert( 'Please enter a valid Visa, MasterCard, American Express or Discover Card Number.' )
              return false; 
            });
          });
         });
        </script>
<title></title>
</head>
<body>
<form name="theForm" id="theForm" method="post">
First Name: <input type="text" name="billingFName" id="billingFName" />&#160;&#160;<span id="billingFNameError"></span>
<br />
Card Number: <input type="text" name="ccNum" id="ccNum" />&#160;&#160;<span id="ccNumError"></span>
<br />
<input type="submit" value="Submit" />
</form>
</body>
</html>

Open in new window

0
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 250 total points
ID: 40026455
You can get the type of card just from the first couple of digits http://en.wikipedia.org/wiki/List_of_Issuer_Identification_Numbers

However, your gateway already has this built in.  If somebody enters a card type that is not on your merchant account, you will get an error code from the gateway stating this.  I wouldn't suggest relying on javascript to validate a card.  Let the gateway's api handle this.

2 Travel and entertainment and banking/financial (3*****)
2.1 American Express (34****)
2.2 JCB (35****)
2.3 American Express (37****)
2.4 38****
3 Banking and financial (4*****)
3.1 Visa (40****)
3.2 Visa (41****)
3.3 Visa (42****)
3.4 Visa (43****)
3.5 Visa (44****)
3.6 Visa (45****)
3.7 Visa (46****)
3.8 Visa (47****)
3.9 Visa (48****)
3.10 Visa (49****)
4 Banking and financial (5*****)
4.1 Mastercard (50****)
4.2 Mastercard (51****)
4.3 Insufficient Digits
4.4 Mastercard (52****)
4.5 Mastercard (53****)
4.6 Mastercard (54****)
4.7 Mastercard (55****)
4.8 Maestro and others (56****)
4.9 57****
4.10 58****
4.11 59****
5 Merchandising and banking/financial (6*****)
5.1 60****
5.2 61****
5.3 62****
5.4 China UnionPay (6200**-6250**)
5.5 6270**-6281**
5.6 63****
5.7 (64****)
5.8 Discover (65****)
5.9 66****
5.10 Maestro (67****)
5.11 (68****)
5.12 (69****)
6 Petroleum and other future industry assignments (7*****)

Open in new window

0
 

Author Closing Comment

by:saabStory
ID: 40032573
You're right - I don't want to rely on Javascript solely for validity. In fact, that was one of my issues with the built in validation method - it only seems to check length - in addition to passing a lot of cards that we don't take.  I always use javascript for a quick check of each field before handing off to the server side code for a more extensive check using the plugin's remote method.

In this instance, I ended up bypassing the javascript check for this altogether and wrote my own server side check using regexes I found to check the card numbers and ranges I wanted.  It only checks length at the moment but will incorporate a luhn checker before the form is rolled out - I've just started looking for a library to use for that.

That said, I always rely on our Gateway provider for the final filter of everything.  I'm just trying to get everything as correct as possible before I send to the gateway.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28372511.html) on how to make a page show some balloons animate up a page…
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

685 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question