Sobes.tech
Middle

Поле ИНН (10 или 12 цифри). Покажи грешка след като се изгуби фокус. Бутонът Изпрати е деактивиран, докато формата не е валидна.

sobes.tech AI

Отговор от 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;
```\n\nТук:\n- Валидацията проверява дали ИНН съдържа точно 10 или 12 цифри.\n- Грешката се показва само след като полето загуби фокус (`blur`).\n- Бутонът "Изпрати" е деактивиран, докато ИНН не е валиден.