Solved

Validate Credit Card Number (Amex,Visa,MC) When Leaving Input Field?

Posted on 2004-10-13
6
683 Views
Last Modified: 2011-09-20
Hello.  I have a simple form field for capturing a credit card number.  At the moment it simply checks to ensure only numbers are input.  Obviously I'll be able (via my merchant integration code) to authorize the card BUT I would like - somehow - to at least check (before submitting to merchant processor) that the input credit card meets the numeric algorthmic rules of credit cards (I believe there is a MOD10 (??) logic that can be run to ensure a credit card number is valid).

I'm hoping this validation of the number can be done when the user TABS or clicks (leaves) the input field ... and IF FALSE ... I need the background color of the input field to change to red.

Can this be done ("on the fly") during the form input process?

Does this make sense?

My form field:


  <tr>
        <td width="100" align="left" valign="middle" class="styleregister3">
      <strong>credit card number</strong>
      </td>
      <td width="132" align="left" valign="middle" class="styleregister3">
      <input class="styleregister3" onkeyup='this.value=this.value.replace(/[^\d]*/gi,"");' name="pay_creditcard" type="text" width="30" maxlength="16">
      </td>
  </tr>



Many thanks.
Richard
0
Comment
Question by:rcbuchanan
  • 5
6 Comments
 
LVL 33

Assisted Solution

by:sajuks
sajuks earned 500 total points
ID: 12305026
0
 

Author Comment

by:rcbuchanan
ID: 12305083
Thanks but ... I'm a real newbie (especially with javascript) ...

I found this script online ... and I'm hoping someone might help me adapt to the forum info I provided above:

---------------------------------------------------------------------------
function isValidCreditCard(type, ccnum) {
   if (type == "Visa") {
      // Visa: length 16, prefix 4, dashes optional.
      var re = /^4\d{3}-?\d{4}-?\d{4}-?\d{4}$/;
   } else if (type == "MC") {
      // Mastercard: length 16, prefix 51-55, dashes optional.
      var re = /^5[1-5]\d{2}-?\d{4}-?\d{4}-?\d{4}$/;
   } else if (type == "Disc") {
      // Discover: length 16, prefix 6011, dashes optional.
      var re = /^6011-?\d{4}-?\d{4}-?\d{4}$/;
   } else if (type == "AmEx") {
      // American Express: length 15, prefix 34 or 37.
      var re = /^3[4,7]\d{13}$/;
   } else if (type == "Diners") {
      // Diners: length 14, prefix 30, 36, or 38.
      var re = /^3[0,6,8]\d{12}$/;
   }
   if (!re.test(ccnum)) return false;
   // Checksum ("Mod 10")
   // Add even digits in even length strings or odd digits in odd length strings.
   var checksum = 0;
   for (var i=(2-(ccnum.length % 2)); i<=ccnum.length; i+=2) {
      checksum += parseInt(ccnum.charAt(i-1));
   }
   // Analyze odd digits in even length strings or even digits in odd length strings.
   for (var i=(ccnum.length % 2) + 1; i<ccnum.length; i+=2) {
      var digit = parseInt(ccnum.charAt(i-1)) * 2;
      if (digit < 10) { checksum += digit; } else { checksum += (digit-9); }
   }
   if ((checksum % 10) == 0) return true; else return false;
}


---------------------------------------------------------------------------

essentially ... rather than use the : function isValidCreditCard(type, ccnum) {
to determine the length (and therefore type) of credit card, ... visa/mc = 16, amex = 15 etc ...
I need the code to count the number of digits input and assume itself.

IF <15 or >16 = false ...

I don't need DinersClub.


AND

if it DOES return a FALSE result ... I need the :
<input class="styleregister3" onkeyup='this.value=this.value.replace(/[^\d]*/gi,"");' name="pay_creditcard" type="text" width="30" maxlength="16">

to use a class="styleregister3_false" INSTEAD of "styleregister3"



does this make sense?
is this possible?

R
0
 
LVL 33

Assisted Solution

by:sajuks
sajuks earned 500 total points
ID: 12305126
HAve you got a field for card type (
<input name="type_creditcard" type="text"> ?
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 33

Assisted Solution

by:sajuks
sajuks earned 500 total points
ID: 12305276
//try this
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<style>
.styleregister3_false { color:red }

</style>
<script>
function isValidCreditCard( ccnum) {
type = document.frm.type_creditcard.value

   if (type == "Visa") {
      // Visa: length 16, prefix 4, dashes optional.
      var re = /^4\d{3}-?\d{4}-?\d{4}-?\d{4}$/;
   } else if (type == "MC") {
      // Mastercard: length 16, prefix 51-55, dashes optional.
      var re = /^5[1-5]\d{2}-?\d{4}-?\d{4}-?\d{4}$/;
   } else if (type == "Disc") {
      // Discover: length 16, prefix 6011, dashes optional.
      var re = /^6011-?\d{4}-?\d{4}-?\d{4}$/;
   } else if (type == "AmEx") {
      // American Express: length 15, prefix 34 or 37.
      var re = /^3[4,7]\d{13}$/;
   } else if (type == "Diners") {
      // Diners: length 14, prefix 30, 36, or 38.
      var re = /^3[0,6,8]\d{12}$/;
   }

   if (!re.test(ccnum))
   {
    document.frm.pay_creditcard.className = 'styleregister3_false';
   return false;
   }
    alert ( "t" +type)
   // Checksum ("Mod 10")
   // Add even digits in even length strings or odd digits in odd length strings.
   var checksum = 0;
   for (var i=(2-(ccnum.length % 2)); i<=ccnum.length; i+=2) {
      checksum += parseInt(ccnum.charAt(i-1));
   }
   // Analyze odd digits in even length strings or even digits in odd length strings.
   for (var i=(ccnum.length % 2) + 1; i<ccnum.length; i+=2) {
      var digit = parseInt(ccnum.charAt(i-1)) * 2;
      if (digit < 10) { checksum += digit; } else { checksum += (digit-9); }
   }
   if ((checksum % 10) == 0)
   {
        return true;
    }
   else
   {
        document.frm.pay_creditcard.className = 'vis';
       return false;
   }
}

</script>
</HEAD>

<BODY>
<form name ="frm">
Type<input type = "text" name="type_creditcard" > <BR>
Num:<input class="styleregister3" onkeyup='this.value=this.value.replace(/[^\d]*/gi,"");' onblur = "return isValidCreditCard(this.value);" name="pay_creditcard" type="text" width="30" maxlength="16">
</form>
</BODY>
</HTML>
0
 
LVL 33

Accepted Solution

by:
sajuks earned 500 total points
ID: 12305419
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<style>
.styleregister3_false { color:red }
</style>
<script>
function isValidCreditCard( ccnum) {
type = frm.type_creditcard.options[ frm.type_creditcard.selectedIndex ].innerText;
   if (type == "Visa") {
      // Visa: length 16, prefix 4, dashes optional.
      var re = /^4\d{3}-?\d{4}-?\d{4}-?\d{4}$/;
   } else if (type == "MC") {
      // Mastercard: length 16, prefix 51-55, dashes optional.
      var re = /^5[1-5]\d{2}-?\d{4}-?\d{4}-?\d{4}$/;
   } else if (type == "Disc") {
      // Discover: length 16, prefix 6011, dashes optional.
      var re = /^6011-?\d{4}-?\d{4}-?\d{4}$/;
   } else if (type == "AmEx") {
      // American Express: length 15, prefix 34 or 37.
      var re = /^3[4,7]\d{13}$/;
   } else if (type == "Diners") {
      // Diners: length 14, prefix 30, 36, or 38.
      var re = /^3[0,6,8]\d{12}$/;
   }
            if (  ccnum.length <=0  )
               {
                  alert ( "Enter Number")
                  document.frm.pay_creditcard.focus()
               return false;
               }
               if (!re.test(ccnum))
               {
                  document.frm.pay_creditcard.className = 'styleregister3_false';
               return false;
               }
               // Checksum ("Mod 10")
               // Add even digits in even length strings or odd digits in odd length strings.
               var checksum = 0;
               for (var i=(2-(ccnum.length % 2)); i<=ccnum.length; i+=2) {
                    checksum += parseInt(ccnum.charAt(i-1));
               }
               // Analyze odd digits in even length strings or even digits in odd length strings.
               for (var i=(ccnum.length % 2) + 1; i<ccnum.length; i+=2) {
                    var digit = parseInt(ccnum.charAt(i-1)) * 2;
                    if (digit < 10) { checksum += digit; } else { checksum += (digit-9); }
               }
               if ((checksum % 10) == 0)
               {
                        return true;
                  }
               else
               {
                        document.frm.pay_creditcard.className = 'vis';
                     return false;
               }

}

</script>
</HEAD>

<BODY>
<form name ="frm">
Type<select name ="type_creditcard" >
<option>Visa</option>
<option>MC</option>
<option>Disc</option>
<option>AmEx</option>
<option>Diners</option>
</select>

Num:<input class="styleregister3" onkeyup='this.value=this.value.replace(/[^\d]*/gi,"");' onblur = "return isValidCreditCard(this.value);" name="pay_creditcard" type="text" width="30" maxlength="16">
</form>
</BODY>
</HTML>
0
 
LVL 33

Expert Comment

by:sajuks
ID: 12315580
Thanks  for the points and grade
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Sums of coloumns in html/java 15 64
Adding a Li to a UL after a specified Li contents 2 42
Reference Error with plugin 1 30
Auto refresh part of an MVC5 View 7 53
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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…
You have products, that come in variants and want to set different prices for them? Watch this micro tutorial that describes how to configure prices for Magento super attributes. Assigning simple products to configurable: We assigned simple products…

930 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

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now