Skip to content

Commit 1e758d7

Browse files
authored
feat(doc): validation update doc (#837)
* Обновление текста документации Обновление текста документации после редактуры технического писателя * удален раздел Способы валидации
1 parent 59729fe commit 1e758d7

File tree

1 file changed

+21
-48
lines changed

1 file changed

+21
-48
lines changed
Lines changed: 21 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,106 +1,81 @@
1-
Хорошо спроектированный интерфейс помогает пользователю не совершать ошибок, а когда они возникают, валидация помогает верно исправить ошибку. В этом гайде разберем, что для этого нужно делать.
2-
31
<br>
42
<div class="mc-alert mc-alert_warning">
53
<i class="mc mc-icon mc-error_16 mc-alert__icon"></i>
64
Все описанные ниже рекомендации не применяются к форме входа.
75
</div>
86

9-
10-
### Способы валидации
11-
От хорошего к более плохому:
12-
- защититься от ошибки,
13-
- показывать под полями,
14-
- показывать над формой.
15-
16-
#### Как защититься от ошибки
17-
Примеры, когда интерфейс не даёт совершить ошибку
7+
Хорошая практика — сделать так, чтобы валидация вообще не понадобилась. Ниже примеры, когда интерфейс не позволяет пользователю совершить ошибку.
188

199
| <span class="mc-error">Плохо<span> | <span class="mc-success">Хорошо<span> |
2010
|---------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
21-
| Сообщать «Название обязательно» | Блокировать кнопку, пока не задано название |
22-
| Сообщать «Название невалидно» | Автоматически заменить пробелы на _, чтобы все было валидно |
23-
| Сообщать «Введите число» | Использовать контролы ввода чисел |
11+
| Сообщать, что поле ввода обязательно для заполнения | Блокировать кнопку отправки формы до тех пор, пока поле не заполнено |
12+
| Сообщать, что в поле введены неподходящие данные | Преобразовать введенные данные в корректные. Например, автоматически заменить все пробелы на знак подчеркивания |
13+
| Заранее сообщать, какие данные нужно вводить в поле | Использовать контрол, которые не позволяет вводить неправильные данные. Например, специальное поле для ввода чисел |
2414

2515
### Когда проверять на ошибки
2616
Есть три способа проверить верность введенных значений:
2717

2818
1. Во время ввода значения
29-
2. По уходу с поля (потере фокуса)
19+
2. По уходу с поля (по потере фокуса)
3020
3. После отправки формы
3121

3222
#### Во время ввода значения
33-
Иногда можно предотвратить неверный ввод значений, в таких случаях нужно запрещать ввод определённых символов, например букв в IP-адрес или в другой числовой формат. В этом случае запрещенные символы не вводятся и показывается желтый тултип на 3 секунды, после этого скрывается.
23+
В тех случаях, когда заранее известно, какие символы точно не подходят для ввода в поле, мы можем предотвратить ввод некорректных значений. Для этого нужно запрещать ввод определенных символов, например букв в IP-адрес. При этом запрещенные символы не вводятся и показывается желтый тултип.
3424

3525
<!-- example(validation-on-type) -->
3626

37-
##### Диапазоны значений
38-
Делайте так, чтобы нельзя было задать неправильно. Например, при вводе периода можно менять местами значения «С» и «По», если значение в «По» будут указаны раньше значения в «С».
39-
40-
#### По уходу с поля
41-
Проверка на верность введеных значений в поле выполняется по потере фокуса (onblur), поля получают состояние ошибки. Поля получают нормальное состояние по изменению значения (onchange).
27+
#### По уходу с поля (по потере фокуса)
28+
Если требования к значениям в поле относительно сложные (например, это IP-адрес или адрес эл. почты), то поле не должно получать состояние ошибки во время ввода, чтобы не сбивать пользователя с толку. Валидация в таких случаях выполняется по потере фокуса. Поле возвращается к нормальному состоянию после изменения значения.
4229

4330
Если у поля есть подпись, то текст ошибки выводится под подписью
4431

4532
<br>
4633
<div class="mc-alert mc-alert_warning">
4734
<i class="mc mc-icon mc-error_16 mc-alert__icon"></i>
48-
Пустые обязательные поля по onblur не получают состояние ошибки
35+
Пустые обязательные поля не получают состояние ошибки по потере фокуса.
4936
</div>
5037

5138
<!-- example(validation-on-blur) -->
5239

5340
##### Составные поля
54-
Если поля нуждаются в валидации [во время ввода значения](/validation/overview#Во-время-ввода-значения) или [по уходу с поля](/validation/overview#По-уходу-с-поля), то сначала выполняются эти проверки. После того как все значения валидны, срабатывает валидация на все поля, поля выделятся фоном и внизу пишется сообщение об ошибке.
41+
Когда значения в нескольких полях тесно связаны между собой (например, края диапазонов), нужно проверять их все вместе. Для этого нужно сначала отдельно проверить все поля [во время ввода значения](/validation/overview#Во-время-ввода-значения) и [по уходу с поля](/validation/overview#По-уходу-с-поля). Если по-отдельности все значения валидны, срабатывает общая валидация на несколько полей: каждое поле не получает состояние ошибки, но все поля вместе выделяются фоном и внизу выводится общее сообщение.
5542

5643
<!-- example(validation-composite) -->
5744

5845
#### После отправки формы
5946
##### Глобальная ошибка
60-
При самой аккуратной валидации отдельных полей всегда что-то может пойти не так: пропадет соединение с БД, другой пользователь изменит данные системы и т. д. Если ошибка возникла или выявилась после нажатия на терминальные кнопки и не связана с ошибками в полях, то такая ошибка показывается алертом над формой и страница прокручивается до алерта с ошибкой.
47+
При самой аккуратной валидации отдельных полей всегда что-то может пойти не так: пропадет соединение с БД, другой пользователь изменит данные системы и т. п. Если ошибка возникла после нажатия на терминальные кнопки и не связана со значениями в полях, то такая ошибка показывается алертом над формой и страница прокручивается до него.
6148

62-
Такой алерт пропадает при повторной отправке или если ошибка исправлена. В остальных случаях он висит и не скрывается, давая пользователю информацию, что было не так.
49+
Такой алерт «висит» и не скрывается, давая пользователю понять, что было не так, — и пропадает при повторной отправке формы.
6350

6451
<br>
6552
<div class="mc-alert mc-alert_info">
6653
<i class="mc mc-icon mc-info-o_16 mc-alert__icon"></i>
67-
При повторной отправке формы все поля проверяются ещё раз. За время, пока пользователь дозаполнял форму, уникальность названия, например, могла пропасть.
54+
При повторной отправке формы все поля проверяются еще раз. За время, пока пользователь дозаполнял форму, уникальность названия, например, могла пропасть.
6855
</div>
6956

7057
<!-- example(validation-global) -->
7158

7259
##### Ошибки в полях
73-
Если не удалось сделать валидацию в полях во время ввода или по уходу с поля, то после отправки формы, страница прокручивается до первого поля с ошибкой и поле получает фокус.
60+
Если не удалось провести валидацию в полях во время ввода или по уходу с поля, то после отправки формы страница прокручивается до первого поля с ошибкой и оно получает фокус.
7461

7562
<br>
7663
<div class="mc-alert mc-alert_warning">
7764
<i class="mc mc-icon mc-error_16 mc-alert__icon"></i>
78-
Не блокируйте терминальную кнопку после отправки формы
65+
Не блокируйте терминальные кнопки после отправки формы!
7966
</div>
8067

8168
### Обязательные поля
82-
По умолчанию подразумевается, что все поля обязательные, обязательность никак не помечается. А необязательные как раз подписываются (или в плейсхолдере, или в подписи под полем).
69+
Если большинство полей на форме — обязательные для заполнения, то эту обязательность не нужно помечать. Необязательные поля, наоборот, подписываются (или в плейсхолдере, или в подписи под полем).
8370

8471
<br>
8572
<div class="mc-alert mc-alert_info">
8673
<i class="mc mc-icon mc-info-o_16 mc-alert__icon"></i>
87-
Поля «комментарий», «описание» почти всегда необязательные, воспринимаются таковыми. Их можно не подписывать как необязательные.
74+
Поля «Комментарий», «Описание» почти всегда необязательные и воспринимаются как необязательные. Их можно не подписывать.
8875
</div>
8976
<br>
9077

91-
Состояние ошибки незаполненное обязательное поле получает только после отправки формы, в тексте ошибки сообщается (1), по каким причинам поле обязательно.
92-
93-
*(1) Иногда текстом ошибки можно пренебречь, если из контекста формы понятно, что поле обязательно для заполнение или текст ошибки получается очень длинным.*
94-
95-
Пустые обязательные поля не получают состояние ошибки при потере фокуса.
96-
97-
<br>
98-
<div class="mc-alert mc-alert_dismissible">
99-
<div>
100-
<header>Совет</header>
101-
Чтобы избежать проверки на незаполненность полей, можно использовать контролы с предустановленными значениями, которые нельзя оставить незаполненными (раскрывающийся список, радиокнопки)
102-
</div>
103-
</div>
78+
Незаполненное обязательное поле получает состояние ошибки только после отправки формы (пустые обязательные поля не получают состояние ошибки при потере фокуса). В тексте ошибки сообщается, по каким причинам поле обязательно. Иногда текстом можно пренебречь — если из контекста формы понятно, что поле обязательное, или если текст получается слишком длинным.
10479

10580
<!-- example(validation-overview) -->
10681

@@ -110,17 +85,15 @@
11085
<br>
11186
<div class="mc-alert mc-alert_warning">
11287
<i class="mc mc-icon mc-error_16 mc-alert__icon"></i>
113-
В больших формах не рекомендуется блокировать терминальные кнопки, может быть неочевидно, почему кнопка отправки формы неактивна.
88+
На больших формах не рекомендуется блокировать терминальные кнопки, потому что может быть совсем неочевидно, почему кнопка неактивна.
11489
</div>
11590

11691
<!-- example(validation-small) -->
11792

11893
#### Другие случаи
119-
Бывают случаи, когда нужно заполнить хотя бы одно из обязательных полей. В этом случае после отправки формы, обязательные поля не получают состояние ошибки, но выводится алерт.
120-
121-
Текст алерта для каждого случая будет свой.
94+
Бывают случаи, когда нужно заполнить хотя бы одно из обязательных полей. В этом случае после отправки формы обязательные поля не получают состояние ошибки, но выводится алерт.
12295

12396
<!-- example(validation-global-one-required) -->
12497

12598
### Показ сообщений об ошибках вне форм
126-
Иногда требуется показывать ошибки вне форм, например было запущено сканирование, но в процессе сервер вернул ошибку, в таком случае показывайте уведомление в центре уведомлений.
99+
Иногда требуется показывать ошибки вне форм, например если было запущено сканирование, но в процессе сервер вернул ошибку. В таких случаях лучше показывать уведомление в центре уведомлений.

0 commit comments

Comments
 (0)