Trying to validate a credit card expiry month against current date

JavaScript
#1

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!

#2

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')
  }
})
#3

Perfect this is exactly what I was looking for and I properly understand the process behind it thanks!

1 Like
#4