Credit Card Validation Using JavaScript

By ROHIT PANDEY

Here, we are going to learn how to Validate Credit Card in JavaScript.

Or

To check the type of Credit Card.

Like  (American-Express, Visa, and Master Card).

To Validate Credit Card we will use Regular Expression.

We should know about some prerequisites to check validation.

CARD                                     PREFIX              LENGTH

MASTER-CARD                  51-55                       16

VISA                                         4                            13,16

AMERICAN-EXPRESS      34,37                        15

Regular Expression for Card Validation are as Follows:-

1. Master-card regular expression

To Validate Master-Card the regular expression would be:

^5[1-5]{1}[0-9]{2}[\s]?[0-9]{4}[\s]?[0-9]{4}[\s]?[0-9]{4}$/

‘ ^ ‘  is representing the starting of the Pattern.

‘ 5[1-5]{1} ‘ is representing that the First letter must be 5 and the second letter can be within 1 to 5.

‘ [0-9]{2}[\s]?[0-9]{4}[\s]?[0-9]{4}[\s]?[0-9]{4} ‘

Above represents the rest of the number can be within 0-9.

‘$’ represents the end of the pattern.

2.Visa regular expression

To Validate Visa Card there are two  regular expressions :

 /^4{1}[0-9]{3}[\s]?[0-9]{4}[\s]?[0-9]{4}[\s]?[0-9]{1}$/
Above regular Expression is for 13 digit visa card.
 /^4{1}[0-9]{3}[\s]?[0-9]{4}[\s]?[0-9]{4}[\s]?[0-9]{4}$/
Above regular Expression is for 16 digit visa card.

‘ ^ ‘  is representing the starting of the Pattern.

‘ 4{1} ‘ is representing that the First letter must be 4.

‘ [0-9]{3}[\s]?[0-9]{4}[\s]?[0-9]{4}[\s]?[0-9]{4} ‘

Above Represents the rest of the number can be within 0-9.

‘$’ represents the end of the pattern.

3.American-Express regular expression

To Validate American-Express Card there are two  regular expressions :

/^3[4|7]{1}[0-9]{2}[\s]?[0-9]{4}[\s]?[0-9]{4}[\s]?[0-9]{3}$/

‘ ^ ‘  is representing the starting of the Pattern.

‘ 3[4|7]{1} ‘ is representing that the First letter must be 3 and the second letter can be either 4 or 7.

‘ [0-9]{2}[\s]?[0-9]{4}[\s]?[0-9]{4}[\s]?[0-9]{3}’ it  represents the rest of the number can be within 0-9.

‘$’ represents the end of the pattern.

JavaScript Code for credit card validation

<script>
      function checkcard()
        {   
            var type=document.getElementById("type").value;
              type=parseInt(type);
            var cardno=document.getElementById("card").value;
            if(type=="1")
                {
                    
                    
                    var regex=/^5[1-5]{1}[0-9]{2}[\s]?[0-9]{4}[\s]?[0-9]{4}[\s]?[0-9]{4}$/;
                     if(regex.test(cardno)){ alert("It is Valid Master-Card");}
                    else{alert("Invalid Card");}
                }
              else if(type=="2")
                {
                    
                    
                    var regex=/^4{1}[0-9]{3}[\s]?[0-9]{4}[\s]?[0-9]{4}[\s]?[0-9]{1}$/;
                    var regex1=/^4{1}[0-9]{3}[\s]?[0-9]{4}[\s]?[0-9]{4}[\s]?[0-9]{4}$/;
                     if(regex.test(cardno)||regex1.test(cardno)){ alert("It is Valid Visa Card");}
                    else{alert("Invalid Card");}
                }
            else
                {
                    var regex=/^3[4|7]{1}[0-9]{2}[\s]?[0-9]{4}[\s]?[0-9]{4}[\s]?[0-9]{3}$/;
                     if(regex.test(cardno)){ alert("It is Valid American Express Card");}
                    else{alert("Invalid Card");}
                    
                }
           
           
        }
       
    
    </script>

OUTPUT

In the above code function checkcard( ) check the credit card no. entered.

‘  document.getElementById(“type”).value ‘. In this  we are taking  type of card entered by user.

‘  parseInt(type) ‘ in this we convert it into integer.

‘ document.getElementById(“card”).value ‘. This takes the card no.

‘ regex.test(cardno ) ‘.This  matches the strings.

Also read: Validating phone numbers in JavaScript