|
1 | | -Хорошо спроектированный интерфейс помогает пользователю не совершать ошибок, а когда они возникают, валидация помогает верно исправить ошибку. В этом гайде разберем, что для этого нужно делать. |
2 | | - |
3 | 1 | <br> |
4 | 2 | <div class="mc-alert mc-alert_warning"> |
5 | 3 | <i class="mc mc-icon mc-error_16 mc-alert__icon"></i> |
6 | 4 | Все описанные ниже рекомендации не применяются к форме входа. |
7 | 5 | </div> |
8 | 6 |
|
9 | | - |
10 | | -### Способы валидации |
11 | | -От хорошего к более плохому: |
12 | | -- защититься от ошибки, |
13 | | -- показывать под полями, |
14 | | -- показывать над формой. |
15 | | - |
16 | | -#### Как защититься от ошибки |
17 | | -Примеры, когда интерфейс не даёт совершить ошибку |
| 7 | +Хорошая практика — сделать так, чтобы валидация вообще не понадобилась. Ниже примеры, когда интерфейс не позволяет пользователю совершить ошибку. |
18 | 8 |
|
19 | 9 | | <span class="mc-error">Плохо<span> | <span class="mc-success">Хорошо<span> | |
20 | 10 | |---------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| |
21 | | -| Сообщать «Название обязательно» | Блокировать кнопку, пока не задано название | |
22 | | -| Сообщать «Название невалидно» | Автоматически заменить пробелы на _, чтобы все было валидно | |
23 | | -| Сообщать «Введите число» | Использовать контролы ввода чисел | |
| 11 | +| Сообщать, что поле ввода обязательно для заполнения | Блокировать кнопку отправки формы до тех пор, пока поле не заполнено | |
| 12 | +| Сообщать, что в поле введены неподходящие данные | Преобразовать введенные данные в корректные. Например, автоматически заменить все пробелы на знак подчеркивания | |
| 13 | +| Заранее сообщать, какие данные нужно вводить в поле | Использовать контрол, которые не позволяет вводить неправильные данные. Например, специальное поле для ввода чисел | |
24 | 14 |
|
25 | 15 | ### Когда проверять на ошибки |
26 | 16 | Есть три способа проверить верность введенных значений: |
27 | 17 |
|
28 | 18 | 1. Во время ввода значения |
29 | | -2. По уходу с поля (потере фокуса) |
| 19 | +2. По уходу с поля (по потере фокуса) |
30 | 20 | 3. После отправки формы |
31 | 21 |
|
32 | 22 | #### Во время ввода значения |
33 | | -Иногда можно предотвратить неверный ввод значений, в таких случаях нужно запрещать ввод определённых символов, например букв в IP-адрес или в другой числовой формат. В этом случае запрещенные символы не вводятся и показывается желтый тултип на 3 секунды, после этого скрывается. |
| 23 | +В тех случаях, когда заранее известно, какие символы точно не подходят для ввода в поле, мы можем предотвратить ввод некорректных значений. Для этого нужно запрещать ввод определенных символов, например букв в IP-адрес. При этом запрещенные символы не вводятся и показывается желтый тултип. |
34 | 24 |
|
35 | 25 | <!-- example(validation-on-type) --> |
36 | 26 |
|
37 | | -##### Диапазоны значений |
38 | | -Делайте так, чтобы нельзя было задать неправильно. Например, при вводе периода можно менять местами значения «С» и «По», если значение в «По» будут указаны раньше значения в «С». |
39 | | - |
40 | | -#### По уходу с поля |
41 | | -Проверка на верность введеных значений в поле выполняется по потере фокуса (onblur), поля получают состояние ошибки. Поля получают нормальное состояние по изменению значения (onchange). |
| 27 | +#### По уходу с поля (по потере фокуса) |
| 28 | +Если требования к значениям в поле относительно сложные (например, это IP-адрес или адрес эл. почты), то поле не должно получать состояние ошибки во время ввода, чтобы не сбивать пользователя с толку. Валидация в таких случаях выполняется по потере фокуса. Поле возвращается к нормальному состоянию после изменения значения. |
42 | 29 |
|
43 | 30 | Если у поля есть подпись, то текст ошибки выводится под подписью |
44 | 31 |
|
45 | 32 | <br> |
46 | 33 | <div class="mc-alert mc-alert_warning"> |
47 | 34 | <i class="mc mc-icon mc-error_16 mc-alert__icon"></i> |
48 | | - Пустые обязательные поля по onblur не получают состояние ошибки |
| 35 | + Пустые обязательные поля не получают состояние ошибки по потере фокуса. |
49 | 36 | </div> |
50 | 37 |
|
51 | 38 | <!-- example(validation-on-blur) --> |
52 | 39 |
|
53 | 40 | ##### Составные поля |
54 | | -Если поля нуждаются в валидации [во время ввода значения](/validation/overview#Во-время-ввода-значения) или [по уходу с поля](/validation/overview#По-уходу-с-поля), то сначала выполняются эти проверки. После того как все значения валидны, срабатывает валидация на все поля, поля выделятся фоном и внизу пишется сообщение об ошибке. |
| 41 | +Когда значения в нескольких полях тесно связаны между собой (например, края диапазонов), нужно проверять их все вместе. Для этого нужно сначала отдельно проверить все поля [во время ввода значения](/validation/overview#Во-время-ввода-значения) и [по уходу с поля](/validation/overview#По-уходу-с-поля). Если по-отдельности все значения валидны, срабатывает общая валидация на несколько полей: каждое поле не получает состояние ошибки, но все поля вместе выделяются фоном и внизу выводится общее сообщение. |
55 | 42 |
|
56 | 43 | <!-- example(validation-composite) --> |
57 | 44 |
|
58 | 45 | #### После отправки формы |
59 | 46 | ##### Глобальная ошибка |
60 | | -При самой аккуратной валидации отдельных полей всегда что-то может пойти не так: пропадет соединение с БД, другой пользователь изменит данные системы и т. д. Если ошибка возникла или выявилась после нажатия на терминальные кнопки и не связана с ошибками в полях, то такая ошибка показывается алертом над формой и страница прокручивается до алерта с ошибкой. |
| 47 | +При самой аккуратной валидации отдельных полей всегда что-то может пойти не так: пропадет соединение с БД, другой пользователь изменит данные системы и т. п. Если ошибка возникла после нажатия на терминальные кнопки и не связана со значениями в полях, то такая ошибка показывается алертом над формой и страница прокручивается до него. |
61 | 48 |
|
62 | | -Такой алерт пропадает при повторной отправке или если ошибка исправлена. В остальных случаях он висит и не скрывается, давая пользователю информацию, что было не так. |
| 49 | +Такой алерт «висит» и не скрывается, давая пользователю понять, что было не так, — и пропадает при повторной отправке формы. |
63 | 50 |
|
64 | 51 | <br> |
65 | 52 | <div class="mc-alert mc-alert_info"> |
66 | 53 | <i class="mc mc-icon mc-info-o_16 mc-alert__icon"></i> |
67 | | - При повторной отправке формы все поля проверяются ещё раз. За время, пока пользователь дозаполнял форму, уникальность названия, например, могла пропасть. |
| 54 | + При повторной отправке формы все поля проверяются еще раз. За время, пока пользователь дозаполнял форму, уникальность названия, например, могла пропасть. |
68 | 55 | </div> |
69 | 56 |
|
70 | 57 | <!-- example(validation-global) --> |
71 | 58 |
|
72 | 59 | ##### Ошибки в полях |
73 | | -Если не удалось сделать валидацию в полях во время ввода или по уходу с поля, то после отправки формы, страница прокручивается до первого поля с ошибкой и поле получает фокус. |
| 60 | +Если не удалось провести валидацию в полях во время ввода или по уходу с поля, то после отправки формы страница прокручивается до первого поля с ошибкой и оно получает фокус. |
74 | 61 |
|
75 | 62 | <br> |
76 | 63 | <div class="mc-alert mc-alert_warning"> |
77 | 64 | <i class="mc mc-icon mc-error_16 mc-alert__icon"></i> |
78 | | - Не блокируйте терминальную кнопку после отправки формы |
| 65 | + Не блокируйте терминальные кнопки после отправки формы! |
79 | 66 | </div> |
80 | 67 |
|
81 | 68 | ### Обязательные поля |
82 | | -По умолчанию подразумевается, что все поля обязательные, обязательность никак не помечается. А необязательные как раз подписываются (или в плейсхолдере, или в подписи под полем). |
| 69 | +Если большинство полей на форме — обязательные для заполнения, то эту обязательность не нужно помечать. Необязательные поля, наоборот, подписываются (или в плейсхолдере, или в подписи под полем). |
83 | 70 |
|
84 | 71 | <br> |
85 | 72 | <div class="mc-alert mc-alert_info"> |
86 | 73 | <i class="mc mc-icon mc-info-o_16 mc-alert__icon"></i> |
87 | | - Поля «комментарий», «описание» почти всегда необязательные, воспринимаются таковыми. Их можно не подписывать как необязательные. |
| 74 | + Поля «Комментарий», «Описание» почти всегда необязательные и воспринимаются как необязательные. Их можно не подписывать. |
88 | 75 | </div> |
89 | 76 | <br> |
90 | 77 |
|
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 | +Незаполненное обязательное поле получает состояние ошибки только после отправки формы (пустые обязательные поля не получают состояние ошибки при потере фокуса). В тексте ошибки сообщается, по каким причинам поле обязательно. Иногда текстом можно пренебречь — если из контекста формы понятно, что поле обязательное, или если текст получается слишком длинным. |
104 | 79 |
|
105 | 80 | <!-- example(validation-overview) --> |
106 | 81 |
|
|
110 | 85 | <br> |
111 | 86 | <div class="mc-alert mc-alert_warning"> |
112 | 87 | <i class="mc mc-icon mc-error_16 mc-alert__icon"></i> |
113 | | - В больших формах не рекомендуется блокировать терминальные кнопки, может быть неочевидно, почему кнопка отправки формы неактивна. |
| 88 | + На больших формах не рекомендуется блокировать терминальные кнопки, потому что может быть совсем неочевидно, почему кнопка неактивна. |
114 | 89 | </div> |
115 | 90 |
|
116 | 91 | <!-- example(validation-small) --> |
117 | 92 |
|
118 | 93 | #### Другие случаи |
119 | | -Бывают случаи, когда нужно заполнить хотя бы одно из обязательных полей. В этом случае после отправки формы, обязательные поля не получают состояние ошибки, но выводится алерт. |
120 | | - |
121 | | -Текст алерта для каждого случая будет свой. |
| 94 | +Бывают случаи, когда нужно заполнить хотя бы одно из обязательных полей. В этом случае после отправки формы обязательные поля не получают состояние ошибки, но выводится алерт. |
122 | 95 |
|
123 | 96 | <!-- example(validation-global-one-required) --> |
124 | 97 |
|
125 | 98 | ### Показ сообщений об ошибках вне форм |
126 | | -Иногда требуется показывать ошибки вне форм, например было запущено сканирование, но в процессе сервер вернул ошибку, в таком случае показывайте уведомление в центре уведомлений. |
| 99 | +Иногда требуется показывать ошибки вне форм, например если было запущено сканирование, но в процессе сервер вернул ошибку. В таких случаях лучше показывать уведомление в центре уведомлений. |
0 commit comments