TIN field (10 or 12 digits). Show error after blur. Submit button disabled until the form is valid.

For the INN field with validation for 10 or 12 digits, displaying an error after blur and disabling the "Submit" button until the form is valid, you can do it like this (in React):

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 must contain 10 or 12 digits</div>
      )}
      <button type="submit" disabled={!isValid}>Submit</button>
    </form>
  );
}

export default InnForm;

Here:

• Validation checks that INN consists of exactly 10 or 12 digits.
• The error is shown only after the field loses focus (blur).
• The "Submit" button is disabled until the INN is valid.