Credit Card Validation Using JavaScript

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