Салық төлеушінің нөмірі (10 немесе 12 цифр). Blur-дан кейін қате көрсетіңіз. Төменгі батырма форма дұрыс емес болғанша өшірілген.

Төмендегі React мысалында, 10 немесе 12 цифрдан тұратын ИНН өрісі үшін валидация, blur оқиғасынан кейін қате көрсетілуі және форма дұрыс емес болғанша "Жіберу" батырмасының өшірілуі қалай жүзеге асырылатынын көрсетеді:

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>
        ИНН:
        <input
          type="text"
          value={inn}
          onChange={e => setInn(e.target.value)}
          onBlur={handleBlur}
          maxLength={12}
        />
      </label>
      {touched && !isValid && (
        <div style={{ color: 'red' }}>ИНН 10 немесе 12 цифрдан тұруы керек</div>
      )}
      <button type="submit" disabled={!isValid}>Жіберу</button>
    </form>
  );
}

export default InnForm;