Helo,
I have an input to enter year for the credit card expiry date How can i validate this input for an invalid 4 digits year and should accept only 4 digits onchange and should be equeal or greater then current year
const [year, setYear] = useState('');
function onSubmit(e) {
e.preventDefault();
dispatch(
addPayment({
card_holder: name,
card_number: creditCardNo,
expiration_month: month,
expiration_year: year,
card_type: creditCardType,
cvc: cvv,
}),
);
setCreditCardNo('');
setName('');
setCVV('');
setMonth('');
setYear('');
}
<div className={styles.sizeExtraSmall}>
<input
placeholder="Year"
onChange={(e) => setYear(e.target.value)}
required
value={year}
type="number"
/>
<CreditCardSVG className={styles.profileIcons} />
</div>
Here are two approaches, one using regex and the other using a function that takes a year and interval of acceptable years out:
const
years = [1900, 2000, 25000, 2022, 2025, 2030],
regex = /20[2-9]\d/;
current_year_or_greater_with_interval =
(interval) => (year) => (year >= new Date().getFullYear())
&& (year <= new Date().getFullYear() + interval);
interval = 3;
for (year of years) {
console.log(year, current_year_or_greater_with_interval(interval)(year));
console.log(year, regex.test(year));
}Or a bit cleaner and easier to read:
const
now = new Date().getFullYear(),
years = [1900, 2000, 25000, 2022, 2025, 2030];
for (year of years) {
console.log(`---${year}---`);
console.log('expr (+ 100)', year >= now && year < now + 100);
console.log('regex', /20[2-9]\d/.test(year));
}