hjaffer2001 hjaffer2001 - 7 months ago 18
HTML Question

Credit card date validation with respect to current date PHP JavaScript

I have a code like this.
The code works fine. Just i want to validate the creditcard month and year alone (mm/yyyy)

The problem is -
The below code should work with respect to that of current date.
For ex: if you type 05/2013 the below code accept it and submit the form, but logically the date 05/2013 is expired and it
should show a message like credit card date expired.

In other words - it can accept the current month and current year and the future one. not the past month or year.

ie. 06/2013 - can be accepted
05/2013 - should not be accepted and should throw an error
06/2014 - this can be accepted

Could some-one help me out.

Plese don't delete or comment this as duplicate question, since I surfed very well, and I want some to help me with the format of mm/yyyy ONLY

<script type="text/javascript">
function validate(payment_form){
var error="";

if(payment_form.credit_card_exp.value.length==0){
document.getElementById("credit_card_exp_error").innerHTML="Enter Credit Card Expiry Date";
error+= false;
}else{
var datereg = /^(0[1-9]|1[012])[- /.](19|20)\d\d+$/;
if (!datereg.test(payment_form.credit_card_exp.value)) {
document.getElementById("credit_card_exp_error").innerHTML="Enter valid Date";
error+= false;
}
else{
document.getElementById("credit_card_exp_error").innerHTML="";
error+= "";
}
}
if(error==""){
return true;
}
else{
return false;
}
}

function IsNumeric(strString)
{
var strValidChars = "0123456789.-";
var strChar;
var blnResult = true;
if (strString.length == 0) return false;
for (i = 0; i < strString.length && blnResult == true; i++)
{
strChar = strString.charAt(i);
if (strValidChars.indexOf(strChar) == -1)
{
blnResult = false;
}
}
return blnResult;
}
</script>


<form id='payment-form' name="payment_form" onSubmit="return validate(this)" action='response.php' method='POST'>
<table border="0" cellpadding="0" cellspacing="0" style="font-size:12px;">
<tr>
<td valign="top" align="left">Credit Card Expiry (mm/yyyy)</td>
<td valign="top" align="left" height="30">
<input type="text" placeholder="12/2015" value="" id="credit_card_exp" name="credit_card_exp"> <br />
<label class="error" id="credit_card_exp_error"></label>
</td>
</tr>
<tr>
<td colspan="2" align="center" style="padding-top:10px;"><input type="submit" value="PAYMENT" class="login" id="payment" name="payment"></td>
</tr>
</table>
</form>


Thanks,
Haan

Answer

Use javascript date object. For example:

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 = 2013;
var month = 6;
//I hardcode year and month (you get year and month from user)
var dateToCheck = new Date(year,month,0,0,0,0,0);

// Check like this:
if (dateToCheck.getTime() < currentDate.getTime()){
   //invalid date
}

In your case, add 1 more if to your code, Like this:

  function validate(payment_form){

       if(payment_form.credit_card_exp.value.length==0){
           document.getElementById("credit_card_exp_error").innerHTML="Enter Credit Card Expiry Date";
           return false;
       }

       var datereg = /^(0[1-9]|1[012])[- /.](19|20)\d\d+$/;
       if (!datereg.test(payment_form.credit_card_exp.value)) {
           document.getElementById("credit_card_exp_error").innerHTML="Enter valid Date";
           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
            return false;
        } 

        document.getElementById("credit_card_exp_error").innerHTML="";
        return true; 
  }