Sobes.tech
Middle

Πεδίο INN (10 ή 12 ψηφία). Εμφάνιση σφάλματος μετά το blur. Το κουμπί Αποστολή είναι απενεργοποιημένο μέχρι η φόρμα να είναι έγκυρη.

sobes.tech AI

Απάντηση από AI

Για το πεδίο INN με επικύρωση 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>
        INN:
        <input
          type="text"
          value={inn}
          onChange={e => setInn(e.target.value)}
          onBlur={handleBlur}
          maxLength={12}
        />
      </label>
      {touched && !isValid && (
        <div style={{ color: 'red' }}>Το INN πρέπει να περιέχει 10 ή 12 ψηφία</div>
      )}
      <button type="submit" disabled={!isValid}>Αποστολή</button>
    </form>
  );
}

export default InnForm;
```\n\nΕδώ:\n- Η επικύρωση ελέγχει ότι το INN αποτελείται ακριβώς από 10 ή 12 ψηφία.\n- Το σφάλμα εμφανίζεται μόνο μετά το πεδίο χάσει το focus (`blur`).\n- Το κουμπί "Αποστολή" απενεργοποιείται όσο το INN δεν είναι έγκυρο.