如何使用 Javascript 验证信用卡到期日期？

Question

I'm a complete Javascript beginner and I'm really stuck on my assignment. I have to get the user to enter credit card details and validate them with Javascript. Here are my problems.

1. The payment type returns false when you don't select anything (which is what I want it to do), but I've used similar code for the expiry month and year, and those two can return true even if you don't make a selection, I want them to return false.

2. The expiry date validation I don't really know how to do. It has to only accept dates after today's date. I've sort of come up with something that should work in theory, but doesn't. Is there something simple (remember I'm a beginner!) that I can add or change that would make it work?

3. There's an issue with the script for the credit card number validation (needs to be 16 numbers) as well, but inexplicably it just doesn't seem to work.

My Javascript and html are below.

Thanks for your help!

Best regards,

Greg

JAVASCRIPT

function validateForm()
{
var firstName=document.getElementById("firstName");
var lastName=document.getElementById("lastName");
var email=document.getElementById("email");
var postcode=document.getElementById("postcode");
var paymentType=document.getElementById("paymentType");
var exMonth=document.getElementById("exMonth").value;
var exYear=document.getElementById("exYear").value;
var cardNumber=document.getElementById("cardNumber").value;
var date = new Date ();
var month = date.getMonth();
var year = date.getFullYear();

            if (firstName.value===""){
                        alert("Please enter your first name");
                        firstName.focus();
                        return false;
            }
            if (lastName.value===""){
                        alert("Please enter your last name");
                        lastName.focus();
                        return false;
            }
            if (email.value.indexOf(".") == -1 || email.value.indexOf("@")== -1) {
                        alert("Please include a valid email address");
                        email.focus();
                        return false;
            }
        if (postcode.value.length!=4  || isNaN(postcode.value)){
                        alert("Please enter 4 numbers for your postcode");
                        postcode.focus();
                        return false;
            }
        if (paymentType.selectedIndex === 0){
            alert("Please select payment type");
            return false;
        }
        if (exMonth.selectedIndex === 0){
            alert("Please select the month");
            return false;
        }
        if (exYear.selectedIndex === 0){
            alert("Please select the year");
            return false;
        }
        if (year> exYear || (year === exYear && month >= exMonth)){
            alert("The expiry date is before today's date. Please select a valid expiry date");
            return false;
        }
        if (cardNumber.value.length!=16  || isNaN(cardNumber.value)){
                        alert("Please enter 16 numbers for your credit card");
                        cardNumber.focus();
                        return false;
            }
            alert("Thank you for your submission");
            return true;
}

HTML

<form name="myForm" autocomplete="on" onsubmit="return validateForm()">

<p><label>First name &#40;required&#41; <input type="text" id="firstName" 
autofocus="autofocus" /> </label></p> 

<p><label>Last name &#40;required&#41; <input type="text" id="lastName"/> </label></p>

<p> Email address &#40;required&#41;
<input type="text" id="email" /> </p> 

<p> Postcode &#40;required&#41;
<input type="text" id="postcode"/> </p> 

<p> Payment type &#40;required&#41;
<select id="paymentType" title="Choose a payment type">
  <option value="0">Select a payment option</option>
  <option value="visa">VISA</option>
  <option value="master">Mastercard</option>
  <option value="amer">American Express</option>
</select>
</p>

<p> Expiry date &#40;required&#41;
<select id="exMonth" title="select a month">
<option value="0">Enter month</option>
    <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>
</select>

<select id="exYear" title="select a year">
 <option value="0">Enter year</option>
    <option value="2013">2013</option>
    <option value="2014">2014</option>
    <option value="2015">2015</option>
    <option value="2016">2016</option>
    <option value="2017">2017</option>
    <option value="2018">2018</option>
    <option value="2019">2019</option>
    <option value="2020">2020</option>
    <option value="2021">2021</option>
    <option value="2022">2022</option>
    <option value="2023">2023</option>
    <option value="2024">2024</option>
    <option value="2025">2025</option>
    <option value="2026">2026</option>
    <option value="2027">2027</option>
    <option value="2028">2028</option>
    <option value="2029">2029</option>
    <option value="2030">2030</option>
    <option value="2031">2031</option>
</select>
</p>
<p><label>Credit card number &#40;required&#41; <input type="text" id="cardNumber"/> </label></p> 
<div id="centreimg">
<input type="submit" name="S1" value="Submit response" />
<input type="reset" name="reset" value="Clear form" /> 
</div>
</form> 

Answer 1

And for the credit card expiration validation you can do like this.

var today, someday;
var exMonth=document.getElementById("exMonth");
var exYear=document.getElementById("exYear");
today = new Date();
someday = new Date();
someday.setFullYear(exYear, exMonth, 1);

if (someday < today) {
   alert("The expiry date is before today's date. Please select a valid expiry date");
   return false;
}

Answer 2

In the following code you have some deviations

var firstName=document.getElementById("firstName");
var lastName=document.getElementById("lastName");
var email=document.getElementById("email");
var postcode=document.getElementById("postcode");
var paymentType=document.getElementById("paymentType");
//here why did you use .value. Probably removing .value would fix your issue
var exMonth=document.getElementById("exMonth").value;
var exYear=document.getElementById("exYear").value;
var cardNumber=document.getElementById("cardNumber").value;

change the last three lines to something like this

var exMonth=document.getElementById("exMonth");
var exYear=document.getElementById("exYear");
var cardNumber=document.getElementById("cardNumber");

Answer 3

I found a problem with the previous answer. I'm posting here my tested solution.

The problem with the previous answers they are not considering the day. For solve it you must use the last day of the month. To find it in Javascript you can use setFullYear(year, month, day) where the day is zero.

Bonus: month in javascript is 0 - 11

But when you set a month you shouldn't use month - 1.

Ex: setFullYear(2020, 6, 0) // -> 31 Jun 2020.

const today = new Date();
const ed = new Date();
ed.setFullYear(year, month, 0);

if (ed < today) {
}

Answer 4

I'm doing something very similar. The answers provided didn't work for my credit card expiry validation, but this one did. (I have used your variables)

if(exMonth.selectedIndex<month && exYear.selectedIndex<=year)
{
    alert("Please enter a valid expiration date");
    return false;
}

Answer 5

Use inputmask and moment .

lets say you want a 10 year date range from today's date dynamically...

include the jQuery.InputMask.js and moment.js library (CDN or self hosted)...

Optional: CDN

https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.4/bindings/inputmask.binding.js
https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js

HTML

<input type="text" id="expires_mmyy" name="cc_expires" maxlength="5" />

JS

$('#expires_mmyy').inputmask({
   alias: 'datetime', 
   inputFormat: 'mm/yy'
   min: moment().add(1, 'M').format('MM/YY'),
   max: moment().add(10, 'Y').format('MM/YY')
})