Sobes.tech
Назад к вопросам
Middle
2

Поле ИНН (10 или 12 цифр). Показать ошибку после blur. Кнопка Отправить disabled, пока форма невалидна

Компании, где спрашивали
МТС БанкМТС Банк

Ответ от нейросети

sobes.tech AI

Для поля ИНН с проверкой на 10 или 12 цифр, отображением ошибки после blur и блокировкой кнопки "Отправить" пока форма невалидна, можно сделать так (на 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>
        ИНН:
        <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;

Здесь:

  • Валидация проверяет, что ИНН состоит ровно из 10 или 12 цифр.
  • Ошибка показывается только после того, как поле потеряло фокус (blur).
  • Кнопка "Отправить" отключена, пока ИНН невалиден.