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>

Is there PHP to this question? Sounds like all JS.. It also sounds like your issue is with the JS functioning, not validating; if you are having cc validation issues here's a thread on that, http://stackoverflow.com/questions/9315647/regex-credit-card-number-tests. — chris85, Sep 10 '16 at 20:09
sorry, my bad.. typo error.. cuz every time i search, i use PHP MYSQL..hehe so must be a habit.. sorry again.. and thank you for the thread.. — Adrian, Sep 10 '16 at 20:14

score 0 · Accepted Answer · answered Sep 10 '16 at 23:00

0

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).

answered Sep 10 '16 at 23:00

Ruben Pirotte

386
2
11

oic.. i think i get it now..haha great advise!thanks! – Adrian Sep 11 '16 at 14:40

score 0 · Answer 2 · answered Sep 11 '16 at 03:27

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.

Refactor the expiration date validation code to a unique function (Single Responsibility Principal).
Remove the duplicate onchange attribute from the credit_card_exp html input element
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.

Javascript Credit Card No and Exp Date Validation

2 Answers2