0

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>
Wiktor Stribiżew
  • 607,720
  • 39
  • 448
  • 563
Ayse8888
  • 137
  • 2
  • 16
  • 1
    Why does the OP need a regex based validation? The requirements, as presented, can be immediately *"translated"* into plain string and number based comparisons. – Peter Seliger Feb 28 '22 at 18:03
  • 1
    "should be greater then current year" - so you're saying that my credit card, which expires October, is invalid? That's fairly brazen of you. – MonkeyZeus Feb 28 '22 at 18:05
  • Does this answer your question? [Javascript Regex validate input year between 1945 - current year](https://stackoverflow.com/questions/49912774/javascript-regex-validate-input-year-between-1945-current-year) – Cubix48 Feb 28 '22 at 18:07
  • Logically, `onChange` handler should account for a few aspects: 1) is the input value a valid number? (i.e. since `input` always returns a `string`, first make sure `parseFloat` returns a `number`). 2) assuming it's a number, is it in four digits? 3) assuming it's a valid four digit number, based on the current month and input month, is it in the future point in time? You could build a change handler function somewhere, and go through each step to validate. – Bumhan Yu Feb 28 '22 at 18:07
  • @MonkeyZeus, thx for the point. i missed this. should be equal or greater. – Ayse8888 Feb 28 '22 at 18:14
  • @Bumhan Yu i get the logic but i cant put it into code. my input type is number so it returns a number. but after that, i dont know how to check if it is 4 digits and if it is equal or greater then the current year and then add an error message if they are not – Ayse8888 Feb 28 '22 at 18:14
  • 1
    Even `` will still return a `string` type, and you'd need to `parse` as a number to use as a `number` (see [this Stack Overflow answer and its comments](https://stackoverflow.com/a/35791893/7216508). You can use `.length` to know how many digits (characters) there are. Then use `new Date().getFullYear()` to compare against current year. Also, you also need a month input value. Like @MonkeyZeus said, the year alone can't determine future date and you have to account for month as well. – Bumhan Yu Feb 28 '22 at 18:22
  • Seven spelling or grammatical errors in one sentence! Sorry, the record is eleven. – Cary Swoveland Feb 28 '22 at 18:38
  • sorry my english may not be good but this place is for correcting coding problems. i am not asking grammatical errors. – Ayse8888 Feb 28 '22 at 18:45

1 Answers1

0

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));
}
David542
  • 104,438
  • 178
  • 489
  • 842