INN väli (10 või 12 numbrit). Näita viga pärast blur. Saada nupp on keelatud, kuni vorm on kehtiv.

10 või 12 numbriga kontrolliga INN välja jaoks, vea kuvamine pärast blur ja nupule "Saada" blokeerimine kuni vorm on kehtetu, seda saab teha nii (Reactis):

import React, { useState } from 'react';

function InnForm() {
  const [inn, setInn] = useState('');
  const [touched, setTouched] = useState(false);

  const isValidInn = (value) => {
    return /^\d{10}$/.test(value) || /^\d{12}$/.test(value);
  };

  const handleBlur = () => {
    setTouched(true);
  };

  const isValid = isValidInn(inn);

  return (
    <form>
      <label>
        INN:
        <input
          type="text"
          value={inn}
          onChange={e => setInn(e.target.value)}
          onBlur={handleBlur}
          maxLength={12}
        />
      </label>
      {touched && !isValid && (
        <div style={{ color: 'red' }}>INN peab sisaldama 10 või 12 numbrit</div>
      )}
      <button type="submit" disabled={!isValid}>Saada</button>
    </form>
  );
}

export default InnForm;
```\n\nSiin:\n- Validatsioon kontrollib, et INN koosneb täpselt 10 või 12 numbrist.\n- Viga kuvatakse ainult pärast seda, kui väli kaotas fookuse (`blur`).\n- "Saada" nupp on keelatud, kuni INN on kehtiv.