Рецепт "Мгновенная валидация форм" #5131
Conversation
makarovaiuliia
requested review from
skorobaeus,
solarrust,
HellSquirrel and
TatianaFokina
as code owners
github-actions
bot
added
статья
|
Привет, классный рецепт! В текущей реализации я могу ввести в поле "Имя" только пробелы и стандартная валидация пройдет.
Предлагаю добавить дополнительную функцию проверки длины строки: function checkLengthMismatch(inputElement) {
if (inputElement.type !== 'text') {
return ""
}
const valueLength = inputElement.value.trim().length
if (valueLength < inputElement.minLength) {
return `Минимальное количество символов ${inputElement.minLength}`
}
return ""
}и ее вызов из function checkInputValidity(inputElement) {
if (inputElement.validity.patternMismatch) {
inputElement.setCustomValidity(inputElement.dataset.errorMessage);
} else {
inputElement.setCustomValidity(checkLengthMismatch(inputElement)); // <--
}
...Тогда валидация не пропустит пробелы: |
|
Привет! Спасибо большое за очень классное дополнение!❤️ Я добавила эту функцию в код и подправила текст статьи) |
|
Мой любимый фильм! 🤩 Спасибо тебе большое за рецепт! Я немного увеличила шрифты в демках, чтобы было и ближе к нашей дизайн-системе, и легче читать. Под капотом убрала у сообщений об ошибках абсолютное позиционирование, чтобы мы не полагались на то, что, если текст будет достаточно мелкий, он поместится в отведённое пространство. Визуально ничего не изменилось, но теперь, если что, форма просто немного подрастёт :) |
|
Ура, я рада, что понравилось)❤️ Если что-то нужно будет доделать, пиши) |
There was a problem hiding this comment.
Как же давно эта статья ждала своего автора! Спасибо большое, что написала её!
Прошлась по первому кругу, предложила небольшие правки форматирования и устоявшихся договорённостей по оформлению.
У меня есть один консёрн во всей этой замечательной истории: блокирование кнопки до верного заполнения полей. В моей голове это плохой интерфейсный паттерн. Кмк, кнопка должна оставаться доступной пользователю, но данные не должны отправляться пока не заполнены поля верно. При ошибке по нажатию на кнопку можно подкручивать до неверно заполненного поля.
Что ты думаешь по этому поводу? Очень интересно узнать твоё мнение. Может быть есть какие-то хорошие источники с аргументами в пользу блокировки кнопки?
|
Привет! Так, сначала по поводу кнопки: сразу оговорюсь, что я не большой эксперт в UX, как и не большой эксперт в принципе во фронтэнде - я только начинаю:)) Но у меня по этому поводу такая мысль: Мне кажется, что деактивация кнопки помогает в ориентации пользователя в интерфейсе. То есть она сразу, наряду с подсвеченными красным полями и комментариями помогает юзеру понять, что форма заполнена неверно. Насчет "при ошибке по нажатию на кнопку можно подкручивать до неверно заполненного поля" - мне кажется, что смысл валидации на лету состоит в том, чтобы не пришлось нажимать на кнопку, поля сразу подсказывают тебе неправильность их заполнения, пропустить их будет сложно. Что касается статей, я не нашла конкретно про кнопку, возможно я не там ищу, так как правда в UX я еще не копала:(( Я сейчас обучаюсь в яндекс-практикуме и именно там предложили использовать деактивацию кнопки при заполнении формы. В общем, я все еще за то, чтобы отключать кнопку, но давайте все вместе решим как по итогу поступим, может спросить какого-нибудь эксперта в UX? Есть ли на примете кто-то с такой компетенцией?) |
Co-authored-by: Alena Batitskaia <solarrust@users.noreply.github.com>
|
@vitya-ne, скорее дело в самом обучении и как оно было построено на этой теме. Нас в один момент после простецких проектов на чистом JS окунули в TypeScript и ООП одновременно, то есть не только надо было мыслить в новой парадигме, так еще и с новым синтаксисом....+ еще начали не с простых проектов как в Доке проект "тяжеловато" (вроде так называется), а со сложных, где все запутано. Но я вот за пару недель сама разобралась и теперь, вроде и ничего страшного и даже нравится😁 |
|
Отлично! Сделала чуть пошире на декстопе ✌ |
|
@solarrust, @skorobaeus, @TatianaFokina |
Да, важное уточнение. Это потенциальные проблемы с интернационализацией, конечно… |
|
Что я нашаманила:
|
|
Если никто не против моих последних изменений, можно смело мёрджить! |
Превью контента из 8a2c518 опубликовано. |
|
Е-е-е-е, мёрджим (за спиной Полины)! @makarovaiuliia, спасибо огромное-преогромное за замечательный рецепт ❤️ |
|
@makarovaiuliia |
Унесла справедливо замечание в ишью. Пасиб! |
Описание
Добавляю статью-рецепт "Мгновенная валидация форм"
Closes #2732
https://content-5131.dev.doka.guide/recipes/validation/
Чек-лист
/css/color/,/tools/json/,/tools/gulp/#kak-ponyat)images/example.png,demos/example/,../demos/example/)