I am struggling with this at the moment. I need to validate the expiry date that is being input into a credit card details form on submit. I understand how to validate that an input has actually been entered and that it is valid but not sure how to compare it to the current month and year. If I could get any pointers that would be awesome. I’ve looked online but I don’t understand a lot of the examples I’ve seen. This is my form
<form>
<label> Expiry MM/YY: </label>
<select id="expiryMonth">
<option selected> Month </option>
<option value="january"> 01 </option>
<option value="february"> 02 </option>
<option value="march"> 03 </option>
<option value="april"> 04 </option>
<option value="may"> 05 </option>
<option value="june"> 06 </option>
<option value="july"> 07 </option>
<option value="august"> 08 </option>
<option value="september"> 09 </option>
<option value="october"> 10 </option>
<option value="novemeber"> 11 </option>
<option value="december"> 12 </option>
</select>
<select id="expiryYear">
<option selected> Year </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>
</select>
<span id="expiryMonthError"> </span>
<span id="expiryYearError"> </span>
</form>
Thanks for any help, if my question doesn’t make sense I apologise!
Hi @jasonread241
You’d need to use JavaScript to make a comparison like that. Something like the following would work for you:
Note: I removed the value
attribute from the option
tags because we only need the numbers to make a date object, plus anything placed inside the tag is considered its value, unless specifically overridden by the value
attribute.
<form id="form">
<label> Expiry MM/YY: </label>
<select id="expiryMonth">
<option selected> Month </option>
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
<select id="expiryYear">
<option selected>Year</option>
<option>2018</option>
<option>2019</option>
<option>2020</option>
<option>2021</option>
<option>2022</option>
<option>2023</option>
<option>2024</option>
<option>2025</option>
<option>2026</option>
<option>2027</option>
<option>2028</option>
<option>2029</option>
<option>2030</option>
</select>
<span id="expiryMonthError"> </span>
<span id="expiryYearError"> </span>
<input type="submit">
</form>
const form = document.getElementById('form');
const expiryMonth = document.getElementById('expiryMonth');
const expiryYear = document.getElementById('expiryYear');
form.addEventListener('submit', ev => {
ev.preventDefault();
const month = expiryMonth.value;
const year = expiryYear.value;
// Create a date object from month and year, on the first
// of that month. You could check the end of the month
// but that would be a little more complicated as you'd need
// to know how many days are in that month.
const expiryDate = new Date(year + '-' + month + '-01');
// You can compare date objects, this says if the expiryDate is
// less than todays date, i.e. in the past. You could do <= if
// you want to check whether they're the same date aswell.
if (expiryDate < new Date()) {
// Fails validation, show some error message to user
console.log('fail')
} else {
// Valid expiry
console.log('pass')
}
})
Perfect this is exactly what I was looking for and I properly understand the process behind it thanks!
1 Like