-
Notifications
You must be signed in to change notification settings - Fork 618
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Рецепт "Мгновенная валидация форм" #5131
Рецепт "Мгновенная валидация форм" #5131
Conversation
Привет, классный рецепт! В текущей реализации я могу ввести в поле "Имя" только пробелы и стандартная валидация пройдет. Предлагаю добавить дополнительную функцию проверки длины строки: 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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Как же давно эта статья ждала своего автора! Спасибо большое, что написала её!
Прошлась по первому кругу, предложила небольшие правки форматирования и устоявшихся договорённостей по оформлению.
У меня есть один консёрн во всей этой замечательной истории: блокирование кнопки до верного заполнения полей. В моей голове это плохой интерфейсный паттерн. Кмк, кнопка должна оставаться доступной пользователю, но данные не должны отправляться пока не заполнены поля верно. При ошибке по нажатию на кнопку можно подкручивать до неверно заполненного поля.
Что ты думаешь по этому поводу? Очень интересно узнать твоё мнение. Может быть есть какие-то хорошие источники с аргументами в пользу блокировки кнопки?
Привет! Так, сначала по поводу кнопки: сразу оговорюсь, что я не большой эксперт в UX, как и не большой эксперт в принципе во фронтэнде - я только начинаю:)) Но у меня по этому поводу такая мысль: Мне кажется, что деактивация кнопки помогает в ориентации пользователя в интерфейсе. То есть она сразу, наряду с подсвеченными красным полями и комментариями помогает юзеру понять, что форма заполнена неверно. Насчет "при ошибке по нажатию на кнопку можно подкручивать до неверно заполненного поля" - мне кажется, что смысл валидации на лету состоит в том, чтобы не пришлось нажимать на кнопку, поля сразу подсказывают тебе неправильность их заполнения, пропустить их будет сложно. Что касается статей, я не нашла конкретно про кнопку, возможно я не там ищу, так как правда в UX я еще не копала:(( Я сейчас обучаюсь в яндекс-практикуме и именно там предложили использовать деактивацию кнопки при заполнении формы. В общем, я все еще за то, чтобы отключать кнопку, но давайте все вместе решим как по итогу поступим, может спросить какого-нибудь эксперта в UX? Есть ли на примете кто-то с такой компетенцией?) |
Co-authored-by: Alena Batitskaia <solarrust@users.noreply.github.com>
@vitya-ne, скорее дело в самом обучении и как оно было построено на этой теме. Нас в один момент после простецких проектов на чистом JS окунули в TypeScript и ООП одновременно, то есть не только надо было мыслить в новой парадигме, так еще и с новым синтаксисом....+ еще начали не с простых проектов как в Доке проект "тяжеловато" (вроде так называется), а со сложных, где все запутано. Но я вот за пару недель сама разобралась и теперь, вроде и ничего страшного и даже нравится😁 |
Отлично! Сделала чуть пошире на декстопе ✌ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Я совсем чуть-чуть отформатировала код примера и поредачила текст.
От меня аппрув, спасибо за рецепт!
@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/
)