Состояния ошибок и предупреждений

Carbon Components Svelte предоставляет мощный набор компонентов для построения интерфейсов, соответствующих стандартам IBM Carbon Design System. Особое внимание уделено обработке ошибок и отображению предупреждений, чтобы пользователи могли быстро понять проблему и корректно взаимодействовать с интерфейсом.

Валидация форм и состояния ошибок

В библиотеке Carbon Components Svelte большинство интерактивных компонентов поддерживают свойства для управления состояниями ошибок. Например, для Input, TextArea, Select и NumberInput доступны следующие ключевые свойства:

  • invalid – логическое значение, определяющее, что поле содержит ошибку.
  • invalidText – текст сообщения об ошибке, который будет отображён пользователю.
  • warn – логическое значение, указывающее на состояние предупреждения.
  • warnText – текст сообщения для состояния предупреждения.

Пример использования компонента Input с ошибкой:

<script>
  import { TextInput } from 'carbon-components-svelte';

  let value = '';
  let hasError = true;
</script>

<TextInput
  bind:value
  invalid={hasError}
  invalidText="Поле обязательно для заполнения"
  labelText="Имя пользователя"
/>

В этом примере invalid={hasError} активирует отображение состояния ошибки, а invalidText предоставляет подробное сообщение.

Отображение предупреждений

Предупреждения помогают информировать пользователя о потенциальной проблеме, не блокируя взаимодействие с компонентом. Применение схоже с обработкой ошибок, но отличается семантически:

<script>
  import { TextInput } from 'carbon-components-svelte';

  let value = '';
  let showWarning = true;
</script>

<TextInput
  bind:value
  warn={showWarning}
  warnText="Рекомендуется использовать более длинное значение"
  labelText="Пароль"
/>

Свойство warn активирует визуальное выделение поля желтым цветом, а warnText выводит сопутствующую подсказку.

Стилизация и визуальные индикаторы

Carbon Components Svelte автоматически применяет правильные стили для состояний ошибок и предупреждений:

  • Ошибка (invalid) – красная рамка и текст сообщения красного цвета.
  • Предупреждение (warn) – желтая рамка и текст сообщения желтого цвета.

Важно использовать эти свойства для соответствия визуальной индикации и стандартам UX. Для компонентов, таких как Dropdown, Select и NumberInput, принцип аналогичен: добавление invalid/warn и соответствующего текста.

Комбинация состояний

Компоненты позволяют комбинировать состояния ошибок и предупреждений, но при этом ошибка имеет приоритет над предупреждением. То есть, если одновременно установлены invalid и warn, компонент будет визуализироваться как ошибка. Это предотвращает путаницу и повышает читаемость интерфейса.

Пример:

<TextInput
  bind:value
  invalid={true}
  invalidText="Некорректное значение"
  warn={true}
  warnText="Значение слишком короткое"
  labelText="Email"
/>

В данном случае компонент будет отображаться как поле с ошибкой, а предупреждение не будет визуально активно.

Управление динамическими ошибками

Для форм с динамической валидацией часто используют биндинги и реактивные выражения:

<script>
  import { TextInput } from 'carbon-components-svelte';

  let email = '';
  $: invalidEmail = !/^\S+@\S+\.\S+$/.test(email);
</script>

<TextInput
  bind:value={email}
  invalid={invalidEmail}
  invalidText="Введите корректный email"
  labelText="Email"
/>

Здесь переменная invalidEmail автоматически пересчитывается при изменении значения email, обеспечивая мгновенную обратную связь пользователю.

Поддержка accessibility

Компоненты Carbon автоматически добавляют атрибуты aria-invalid и aria-describedby для обеспечения доступности. Это значит, что скринридеры корректно озвучивают состояние ошибки или предупреждения, а текст ошибки связан с соответствующим полем формы.

Сообщения об ошибках в других компонентах

Не только поля ввода поддерживают состояния ошибок:

  • TextArea – добавление invalid и invalidText работает аналогично TextInput.
  • NumberInput – поддерживает warn и invalid, автоматически отображая текстовые подсказки.
  • Select / Dropdown – применяют те же свойства для выделения некорректного выбора.
<Select
  bind:value={selectedOption}
  invalid={selectedOption === ''}
  invalidText="Выберите значение"
  labelText="Выбор категории"
/>

Практика организации сообщений

  • Сообщения об ошибках должны быть конкретными и лаконичными.
  • Предупреждения — информативными, но не блокирующими действия пользователя.
  • Все текстовые подсказки лучше локализовать и хранить централизованно, чтобы избежать дублирования.

С помощью Carbon Components Svelte можно реализовать комплексную обработку ошибок и предупреждений, обеспечивая высокий уровень UX, визуальную последовательность и доступность интерфейса.

Оглавление