How to validate credit card exp date with jQuery

Question

I need help validating an input's value against the current date. Basically i need to "addMethod" for the jquery validate plug in that would require the CC Exp Date - format MM/YYYY to be a future date no more than 10 yrs into the future. I have been looking for 2 days and have yet to find a good solution! Please Help!

Answer 1

you can try something similar to this:

$.validator.addMethod('ccDate', function (value) {
        var inDate = new Date(value);
        var futureDate = new Date();
        futureDate.setYear(futureDate.getFullYear() + 10);
        var diff = inDate - futureDate;
        return (diff < 0);
    }, function() {
                    var $msg = 'Date must be within 10 years';  
                    return $msg;
        });

then just add a call to this new type (ccDate) for this field in your rules section of the validate call. you may have to tweak how you parse out the value of the field to create a proper date, but the idea is here.

Answer 2

With help from Patrick, this works and will hopefully help someone else out as well, this was a pain in the ass for a not so great programmer.

$.validator.addMethod(
"Future",
function (value, element) {
    var today = new Date();
    var startDate = new Date(today.getFullYear(),today.getMonth(),1,0,0,0,0);
    var expDate = value;
    var separatorIndex = expDate.indexOf('/');
    expDate = expDate.substr( 0, separatorIndex ) + '/1' + expDate.substr( separatorIndex );
    return Date.parse(startDate) <= Date.parse(expDate);
},
"Must be a valid Expiration Date."
);

then in rules: {
  elementName: {
    Future: true
  }
},
messages: {

}

Answer 3

I have done little modification to the code. I think following solution will work for validating credit card expiry date. It allows m/yy or m/yyyy format for expiry date.

$.validator.addMethod(
    "ccexpdate",
function (value, element) {

    // Initialize todays date   i.e start date
    var today = new Date();
    var startDate = new Date(today.getFullYear(),today.getMonth(),1,0,0,0,0);

    // Initialize End/Expiry date i.e. adding 10 years to expire
    var futureLimitDate= new Date(today.getFullYear()+10,today.getMonth(),1,0,0,0,0);
    var expDate = value;

    var expYearCheck='';

    // Check Date format
    var separatorIndex = expDate.indexOf('/');
    if(separatorIndex==-1)return false; // Return false if no / found

    var expDateArr=expDate.split('/'); 
    if(expDateArr.length>2)return false; // Return false if no num/num format found

    // Check Month for validity
    if(eval(expDateArr[0])<1||eval(expDateArr[0])>12)
    {
        //If month is not valid i.e not in range 1-12
        return false;
    }

    //Check Year for format YY or YYYY
    switch(expDateArr[1].length)
    {
        case 2:expYearCheck=2000+parseInt(expDateArr[1], 10);break; // If YY format convert it to 20YY to it
        case 4:expYearCheck=expDateArr[1];break; // If YYYY format assign it to check Year Var
        default:return false;break;
    }


    // Calculated new exp Date for ja  
    expDate=new Date(eval(expYearCheck),(eval(expDateArr[0])-1),1,0,0,0,0);



    if(Date.parse(startDate) <= Date.parse(expDate))
    {
        if(Date.parse(expDate) <= Date.parse(futureLimitDate))
        {
            // Date validated
            return true;    
        }else
        {

            // Date exceeds future date
            return false;
        }

    }else
    {

        // Date is earlier than todays date
        return false;
    }


},
"Must be a valid Expiration Date."
);

Answer 4

The answer is here at the bottom: http://forum.jquery.com/topic/credit-card-expiration-check

One short note: This linked code assumes your values for years are four digits. If your year values are two digits then you will need to convert them to four digits. Just use the following line where appropriate and all should be good.

var year = 2000+parseInt($year.val(), 10);