javascript - Credit card expiry date validation in HTML - Stack Overflow

admin管理员组

文章数量:1435196

HTML code:

<tr>
    <td><label for="expiry_day">Expiry date(MM/YYYY):<span id="imp">*</span></label></td>
    <td>
    <select id="expiry_month" tabindex="4">
    <optgroup label="Month">
    <option value="01">January</option>
    <option value="02">February</option>
    <option value="03">March</option>
    <option value="04">April</option>
    <option value="05">May</option>
    <option value="06">June</option>
    <option value="07">July</option>
    <option value="08">August</option>
    <option value="09">September</option>
    <option value="10">October</option>
    <option value="11">November</option>
    <option value="12">December</option>
    </optgroup>
    </select>

    <select id="expiry_year" tabindex="5">
    <optgroup label="Year">
    <script>generate_year();</script>   
    </optgroup>
    </select>
    </td>
</tr>

JavaScript code:

function generate_year()                    /*For generate cc year*/
    {
        for (var i = 2014; i <= 2104; i++)

        {
            document.write ("<option value='" + i + "'>" + i + "</option>");
        }   
    }

        function val_cc () {          

        var expiry_month = document.getElementById("expiry_month").value;
        var expiry_year = document.getElementById("expiry_year").value;
        var today = new Date();
        var expiry_date = today.setFullYear(expiry_year, expiry_month);

        if (today.getTime() > expiry_date.getTime())

        {
            alert ("\u2022Expiry month and year cannot be blank/Expiry month and year is before today month and year.");

            return false;
        }
}

These codes are basically used to validate the expiry date for credit card.For example,if today is March 2014 and the user chooses February 2014,I want the form to return false.However,if he chooses April 2014,I want the form to return true and proceed to the next page.If there are mistakes,can you please point them out and do a simple explanation?

HTML code:

<tr>
    <td><label for="expiry_day">Expiry date(MM/YYYY):<span id="imp">*</span></label></td>
    <td>
    <select id="expiry_month" tabindex="4">
    <optgroup label="Month">
    <option value="01">January</option>
    <option value="02">February</option>
    <option value="03">March</option>
    <option value="04">April</option>
    <option value="05">May</option>
    <option value="06">June</option>
    <option value="07">July</option>
    <option value="08">August</option>
    <option value="09">September</option>
    <option value="10">October</option>
    <option value="11">November</option>
    <option value="12">December</option>
    </optgroup>
    </select>

    <select id="expiry_year" tabindex="5">
    <optgroup label="Year">
    <script>generate_year();</script>   
    </optgroup>
    </select>
    </td>
</tr>

JavaScript code:

function generate_year()                    /*For generate cc year*/
    {
        for (var i = 2014; i <= 2104; i++)

        {
            document.write ("<option value='" + i + "'>" + i + "</option>");
        }   
    }

        function val_cc () {          

        var expiry_month = document.getElementById("expiry_month").value;
        var expiry_year = document.getElementById("expiry_year").value;
        var today = new Date();
        var expiry_date = today.setFullYear(expiry_year, expiry_month);

        if (today.getTime() > expiry_date.getTime())

        {
            alert ("\u2022Expiry month and year cannot be blank/Expiry month and year is before today month and year.");

            return false;
        }
}

These codes are basically used to validate the expiry date for credit card.For example,if today is March 2014 and the user chooses February 2014,I want the form to return false.However,if he chooses April 2014,I want the form to return true and proceed to the next page.If there are mistakes,can you please point them out and do a simple explanation?

• javascript
• html

Share Improve this question Follow edited Mar 29, 2014 at 9:43 user3310635 asked Mar 29, 2014 at 9:25 user3310635user3310635 5311 silver badge88 bronze badges 5

• where is the function for validation? put your validation code in a function – Govind Singh Commented Mar 29, 2014 at 9:36
• Sorry,it was my mistake and the correction is made. – user3310635 Commented Mar 29, 2014 at 9:43
• where is your expiry_date in your program – Mr.G Commented Mar 29, 2014 at 9:47
• This question appears to be off-topic because it is about code review. – Jukka K. Korpela Commented Mar 29, 2014 at 10:42
• Good answer here: stackoverflow./a/75975495/386579 – shasi kanth Commented Jun 5, 2023 at 14:14

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

You should update values from select-boxes every time user changes values, please see this fiddle http://jsfiddle/shershen08/wcFC4/

function runMyCheck(){
//update value every run
var expiry_month = document.getElementById("expiry_month").value;
var expiry_year = document.getElementById("expiry_year").value;

var today = new Date();
var selDate = new Date();

if (today.getTime() > selDate.setFullYear(expiry_year, expiry_month)){
 //too late
    alert ("\u2022Expiry month and year cannot be blank/Expiry month and year is before today month and year.");
    return false;
} else {
//do good stuff...

}

}

Try this:

var today = new Date();
var expDate = new Date($("#cart-expyear").val(),($("#cart-expmonth").val()-1)); // JS Date Month is 0-11 not 1-12 replace parameters with year and month
if(today.getTime() > expDate.getTime()) {
   console.log("Your Card is expired. Please check expiry date.");
}

Try this:

 function generate_year()                    /*For generate cc year*/
    {
        for (var i = 2014; i <= 2104; i++)

        {
            var x = document.getElementById("expiry_year");
            var option = document.createElement("option");
            option.text = i;
            option.value=i
            x.add(option);
        }   
    }
    var expiry_month = document.getElementById("expiry_month").value;
       alert(expiry_month);
    var expiry_year = document.getElementById("expiry_year").value;
    var today = new Date();
    var expiry_date = today.setFullYear(expiry_year, expiry_month);
     var from=new Date();
    if (today.getTime() >from.setFullYear(expiry_year, expiry_month) )
    {
        alert ("\u2022Expiry month and year cannot be blank/Expiry month and year is before today month and year.");

       //return false;
    }

本文标签： javascriptCredit card expiry date validation in HTMLStack Overflow