Есть ли инвалидность?

Инвалидность (Invalidity) в HTML/CSS

Что это такое

Инвалидность (invalid state) — это состояние, когда элемент формы не соответствует требуемым критериям валидации. Браузер автоматически применяет CSS псевдокласс :invalid к элементам, которые не прошли валидацию.

HTML5 валидация

Браузер автоматически валидирует элементы формы на основе их атрибутов:

<!-- Валидация: email должен быть валидным email -->
<input type="email" required />

<!-- Валидация: число от 1 до 100 -->
<input type="number" min="1" max="100" />

<!-- Валидация: минимум 8 символов -->
<input type="password" minlength="8" />

<!-- Валидация: соответствие паттерну -->
<input type="text" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" />

CSS селекторы для инвалидности

:invalid

Применяется когда элемент инвалидный:

input:invalid {
  border-color: red;
  background-color: #ffe6e6;
}

input:invalid + .error {
  display: block;
}

<input type="email" value="not-an-email" />
<span class="error">Некорректный email</span>

:valid

Применяется когда элемент валидный:

input:valid {
  border-color: green;
  background-color: #e6ffe6;
}

input:valid::after {
  content: " ✓";
  color: green;
}

Примеры инвалидности

1. Required поля

<style>
  input:invalid {
    border: 2px solid red;
  }
  input:valid {
    border: 2px solid green;
  }
</style>

<!-- Инвалидно: пусто -->
<input type="text" required />

<!-- Валидно: заполнено -->
<input type="text" required value="Иван" />

2. Email

<!-- Инвалидно: неправильный формат -->
<input type="email" value="notanemail" />

<!-- Валидно -->
<input type="email" value="user@example.com" />

3. Число с диапазоном

<!-- Инвалидно: вне диапазона -->
<input type="number" min="1" max="10" value="15" />

<!-- Валидно -->
<input type="number" min="1" max="10" value="5" />

4. Custom pattern

<!-- Инвалидно: не соответствует паттерну -->
<input type="text" pattern="[A-Z]{3}" value="abc" />

<!-- Валидно -->
<input type="text" pattern="[A-Z]{3}" value="ABC" />

Полный пример формы

function Form() {
  return (
    <form onSubmit={(e) => {
      e.preventDefault();
      // Браузер не даст отправить если есть :invalid поля
    }}>
      <div>
        <label>Email (required)</label>
        <input
          type="email"
          required
          style={{
            borderColor: 'var(--invalid-color)',
          }}
        />
      </div>

      <div>
        <label>Age (1-120)</label>
        <input
          type="number"
          min="1"
          max="120"
        />
      </div>

      <div>
        <label>Passport (AAA-123456)</label>
        <input
          type="text"
          pattern="[A-Z]{3}-[0-9]{6}"
        />
      </div>

      <button type="submit">Submit</button>
    </form>
  );
}

CSS стилизация инвалидности

/* Базовые стили */
input {
  padding: 8px 12px;
  border: 2px solid #ccc;
  border-radius: 4px;
  transition: all 0.3s;
}

/* Когда инвалидно */
input:invalid {
  border-color: #d32f2f;
  background-color: #ffebee;
  box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.1);
}

/* Когда валидно */
input:valid {
  border-color: #388e3c;
  background-color: #e8f5e9;
}

/* Комбинировать с :focus */
input:invalid:focus {
  outline: none;
  border-color: #d32f2f;
  box-shadow: 0 0 0 4px rgba(211, 47, 47, 0.2);
}

/* Скрывать сообщение об ошибке по умолчанию */
input:invalid::after {
  content: " ";
}

JavaScript валидация

function ValidationExample() {
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const isValid = e.currentTarget.validity.valid;
    const validityState = e.currentTarget.validity;

    console.log({
      valid: isValid,
      valueMissing: validityState.valueMissing, // required
      typeMismatch: validityState.typeMismatch, // неправильный тип
      patternMismatch: validityState.patternMismatch, // pattern
      tooShort: validityState.tooShort, // minlength
      tooLong: validityState.tooLong, // maxlength
      rangeUnderflow: validityState.rangeUnderflow, // < min
      rangeOverflow: validityState.rangeOverflow, // > max
      customError: validityState.customError, // setCustomValidity()
    });
  };

  return (
    <input
      type="email"
      onChange={handleChange}
      onInvalid={(e) => {
        e.preventDefault();
        console.log('Input is invalid!');
      }}
    />
  );
}

Подавление встроенной валидации

<!-- Отключить встроенную валидацию браузера -->
<form novalidate>
  <input type="email" />
  <button type="submit">Submit</button>
</form>

Тогда нужно самим проверять через JavaScript:

function CustomValidation() {
  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();

    const form = e.currentTarget;
    const inputs = form.querySelectorAll('input');

    let isValid = true;
    inputs.forEach((input) => {
      if (!input.value) {
        isValid = false;
        input.style.borderColor = 'red';
      }
    });

    if (isValid) {
      form.submit();
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" />
      <button type="submit">Submit</button>
    </form>
  );
}

Вывод

Инвалидность — это встроенный в браузер механизм валидации. Используйте :invalid и :valid для стилизации, а ValidityState API для проверки деталей ошибок. Для сложных сценариев применяйте React hooks или библиотеки для форм (React Hook Form, Formik).