Назад к вопросам
МТС Банк
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). - Кнопка "Отправить" отключена, пока ИНН невалиден.