Solved

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

Posted on 2004-10-13
6
686 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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
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

Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

Question has a verified solution.

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

Every business owner understands the significance of online customer reviews and the impact it can have on sales and revenues. With technology advancing at such a rapid pace, getting online reviews has never been easier, especially when many regions…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
This tutorial demonstrates a quick way of adding group price to multiple Magento products.
This video explains how to create simple products associated to Magento configurable product and offers fast way of their generation with Store Manager for Magento tool.

832 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