Cyrille Cyrille - 10 days ago 3
Javascript Question

credit card input validation using regular expression in javascript

I've been trying to get this done but no success. I am using regular expression to validate the credit card number entered by user based on the type of credit card selected through the radio button.
But I keed having the alert for the all if statement. It looks like all the if else statements are tested.

There is the HTML code fragment:

<code>
<p><b>Payment Information:</b></p>
<fieldset>
<input type="radio" name="payment" value="Visa" id="visa" />Visa &nbsp;
<input type="radio" name="payment" value="Master Card" />Master Card &nbsp;
<input type="radio" name="payment" value="American Express" />American Express &nbsp;
<input type="radio" name="payment" value="Discover" />Discover <br /><br />
<label>Card Number:</label>
<input type="text" name="cardNumber" id="cardNum" size="30" value="" onblur="ValidateCreditCardNumber()" />
</code>



And there is my javascript function :

<code>

function ValidateCreditCardNumber(){

var ccNum = document.getElementById("cardNum").value;



var visaRegEx = /^(?:4[0-9]{12}(?:[0-9]{3})?)$/;
var mastercardRegEx = /^(?:5[1-5][0-9]{14})$/;
var amexpRegEx = /^(?:3[47][0-9]{13})$/;
var discovRegEx = /^(?:6(?:011|5[0-9][0-9])[0-9]{12})$/;


if (visaRegEx.test(ccNum) === false ){ // Visa validation
alert("Please provide a valid Visa number!");
}
else
{
alert("Thank You!");
}

if (mastercardRegEx.test(ccNum) === false){ // MasterCard validation
alert("Please provide a valid MasterCard number!");
}
else
{
alert("Thank You!");
}

if(amexpRegEx.test(ccNum) === false){ // Amex validation
alert("Not a valid America Express number!");
}
else
{
alert("Thank You!");
}

if (discovRegEx.test(ccNum) === false){ // Discover validation
alert("Please provide a valid Discover number!");
}
else
{
alert("Thank You!");
}


}
</code>


Any kind of help or advice would be really appreciated.

Dai Dai
Answer

Change your logic to this:

<script type="text/javascript">

// Store the regexes as globals so they're cached and not re-parsed on every call:
var visaPattern = /^(?:4[0-9]{12}(?:[0-9]{3})?)$/;
var mastPattern = /^(?:5[1-5][0-9]{14})$/;
var amexPattern = /^(?:3[47][0-9]{13})$/;
var discPattern = /^(?:6(?:011|5[0-9][0-9])[0-9]{12})$/; 

function validateCreditCardNumber() {

    var ccNum  = document.getElementById("cardNum").value;

    var isVisa = visaPattern.test( ccNum ) === true;
    var isMast = mastPattern.test( ccNum ) === true;
    var isAmex = amexPattern.test( ccNum ) === true;
    var isDisc = discPattern.test( ccNum ) === true;

    if( isVisa || isMast || isAmex || isDisc ) {
        // at least one regex matches, so the card number is valid.

        if( isVisa ) {
            // Visa-specific logic goes here
        }
        else if( isMast ) {
             // Mastercard-specific logic goes here
        }
        else if( isAmex ) {
            // AMEX-specific logic goes here
        }
        else if( isDisc ) {
            // Discover-specific logic goes here
        }
    }
    else {
        alert("Please enter a valid card number.");
    }
}

</script>
Comments