Javascript Credit Card No and Exp Date Validation

Question

The thing is, I already figured it out(just copy/paste some codes from stackoverflow). But the thing that only matters for me is; Whenever I enter cc number and hits "Tab", it automatically validates the expiration. I used onchange attribute for the 2 boxes. Please help me adjust my codes.

What i would like for the outcome is..

-When i enter cc number, and hit "Tab" the onchange attribute for cc textbox[validates it] and not yet validating the Expiration textbox[not yet validate].

I have tried everything but it only makes it not work..hehe.. Im sorry guys, im not really good at constructing javascripts. Thank you.

Javascript

<!-- START: VALIDATION IN CREDIT CARDS -->
<script type="text/javascript">


//START: FOR CREDIT CARD NUMBER

    function validateCard(card_no){

        var Check_MasterCard = /^([51|52|53|54|55]{2})([0-9]{14})$/;
        var Check_Visa = /^([4]{1})([0-9]{12,15})$/;

        if(Check_Visa.test(card_no)){
            document.getElementById('cardSuccess').style.display = "block";
            document.getElementById('cardSuccess_1').style.display = "none";
            document.getElementById('cardError').style.display = "none";
            return true;
        }else if(Check_MasterCard.test(card_no)){
            document.getElementById('cardSuccess_1').style.display = "block";
            document.getElementById('cardSuccess').style.display = "none";
            document.getElementById('cardError').style.display = "none";
            return true;
        }else{
            document.getElementById('cardError').style.display = "block";
            document.getElementById('cardSuccess_1').style.display = "none";
            document.getElementById('cardSuccess').style.display = "none";
            return false;
        }

    }   

//END: FOR CREDIT CARD NUMBER

    function validateForm(){
        // Set error catcher
        var error = 0;

        // Validate Credit Card
        if(!validateCard(document.getElementById('card_no').value)){

            error++;
        }

        if(error > 0){
           return false;
        }

        //FOR EXPIRY VALIDATION
       var datereg = /^(0[1-9]|1[012])[- /.](19|20)\d\d+$/;
       if (!datereg.test(document.getElementById('credit_card_exp').value)) {
           document.getElementById("expiry_error1").style.display="block";
           document.getElementById("expiry_error").style.display="none";
           return false;
        }

        var currentDate = new Date(); //this returns the current datetime
        //Clear all the other date parts.
        currentDate.setDate(0);
        currentDate.setHours(0);
        currentDate.setMinutes(0);
        currentDate.setSeconds(0);
        currentDate.setMilliseconds(0);   

        var year = parseInt(payment_form.credit_card_exp.value.split('/')[1]);
        var month = parseInt(payment_form.credit_card_exp.value.split('/')[0]);

        var dateToCheck = new Date(year,month,0,0,0,0,0);

        if (dateToCheck.getTime() < currentDate.getTime()){
           //invalid date
           document.getElementById("expiry_error").style.display="block";
           document.getElementById("expiry_error1").style.display="none";
            return false;
        } 

        document.getElementById("expiry_error").style.display="none";
        document.getElementById("expiry_error1").style.display="none";
        return true; 
        //END FOR EXPIRY VALIDATION
    } 


</script>
<!-- END: VALIDATION IN CREDIT CARDS -->

HTML:

<form id='payment_form' name="payment_form" method="post" action="exec_order_process.php" onsubmit="return validateForm();">
Card Number*
<input class="form-control" onchange="return validateForm();" name="card_no" id="card_no" type="text" maxlength="16" required="required" placeholder="Enter Card number" >

<span class="alert alert-danger changeFont" id="cardError" style="display: none;">You must enter a valid Credit Card for VISA and MasterCard Only<span class="glyphicon glyphicon-remove"></span></span>
<span class="alert alert-success changeFont" id="cardSuccess" style="display: none;">This is a VISA card <span class="glyphicon glyphicon-ok"></span></span>
<span class="alert alert-success changeFont" id="cardSuccess_1" style="display: none;">This is a MasterCard <span class="glyphicon glyphicon-ok"></span></span>

Expiration*
<input onchange="return validateForm();" class="form-control" name="credit_card_exp" id="credit_card_exp" type="text" maxlength="7" onchange="validCCForm(this);" required placeholder="MM / YYYY ">

<label class="error" id="expiry_error" style="display: none;">Credit Card Expired</label>
<label class="error" id="expiry_error1" style="display: none;">Enter valid Date Format</label>

<input type="submit" value="Submit">
</form>

Answer 1

You will have to create 2 Javascript functions:

validateCreditCard and validateExpiration

Then you can use the validateCreditCard function on you credit card input (on change) and validateExpiration on the expiration input.

You can still keep a function validateForm, but this function will simply call the other 2 functions so that all inputs are validated (you can use it for example before submit).

Answer 2

The reason why the expiration date is being validated when the card number input element loses focus is that the onchange attribute of that element calls ValidateForm() which is where you are validating the expiration date.

1. Refactor the expiration date validation code to a unique function (Single Responsibility Principal).
2. Remove the duplicate onchange attribute from the credit_card_exp html input element
3. Refactor the onchange attributes of your input elements as follows:

 <label>Card Number*</label> <input onchange="validateCardNumber(this.value)" class="form-control" name="card_no" id="card_no" type="text" maxlength="16" required="required" placeholder="Enter Card number" /> <label>Expiration*</label> <input onchange="validateExpirationDate(this.value)" class="form-control" name="credit_card_exp" id="credit_card_exp" type="text" maxlength="7" required placeholder="MM / YYYY " />​ 

You may like to review the HTML onchange Attribute and JavaScript/HTML Event pages on w3Schools.com website for clarification.