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

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
rcbuchananAsked:
Who is Participating?
 
sajuksConnect With a Mentor Commented:
<!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
 
rcbuchananAuthor Commented:
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
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
sajuksConnect With a Mentor Commented:
HAve you got a field for card type (
<input name="type_creditcard" type="text"> ?
0
 
sajuksConnect With a Mentor Commented:
//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
 
sajuksCommented:
Thanks  for the points and grade
0
All Courses

From novice to tech pro — start learning today.