Проверка пустых полей формы: универсальный способ
В своей практике мне тоже приходилось использовать разные варианты проверки заполнения полей формы в зависимости от конкретных условий. И в файле *.js присутствовало несколько функций для проверки разных форм, что увеличивало объём кода и ухудшало его восприятие.
В какой-то момент было принято решение написать вариант универсального способа проверки пустых полей, который можно будет использовать для любой формы с любым количеством обязательных полей. Необходимыми условиями такого способа были определены простота и отсутствие громоздких конструкций. В результате был найден способ, который полностью меня устроил и простотой, и универсальностью.
Простая проверка полей формы на заполненность с помощью jQuery
Сегодня хочу поделиться с Вами простым методом проверки полей формы на заполненность перед отправкой сообщения с помощью jQuery. Скрипт написал я сам, хотя, несколько лет назад такого написать не получилось, �� а очень надо было. Не будем ходить вокруг да около, а займемся делом.
Для того, чтобы нам было что проверять, нужно составить HTML каркас формы, и чуток ее приукрасить CSS стилями, например я по-быстрому сверстал вот такой каркас:
Немножко описания того, что я написал в каркасе формы:
- Форма обернута контейнером с классом .form_box
- Каждой форме на странице, которую нужно проверить, присвоен класс .rf (required fields)
- Каждому полю формы, которое обязательно к заполнению, присвоен класс .rfield
- Кнопке «Отправить данные» присвоено два класса .btn_submit и .disabled (один для стилизации, второй для скрипта).
Ну и как всегда совсем немножко стилей для формы:
Стили достаточно примитивные, поэтому описывать их смысла нет)
Плацдарм для написания скрипта проверки полей формы готов.
Пишем jQuery скрипт:
Пришло время открыть самое интересное: механизм проверки полей формы. Все пояснения в листинге скрипта:
Протестировать работоспособность скрипта можно кликнув по кнопке Demo, также можно скачать исходники к данному уроку кликнув по кнопке Source:
Заключение
Самый приятный момент работы, написанного мною, скрипта это то, что он проверяет все указанные формы на странице, да и проще метода, не используя сторонние плагины, не найти (мне так кажется) и мне нравится, так сказать, сам механизм его работы, нет необходимости проверять каждое поле формы (как я делал когда-то). Надеюсь Вам пригодится мой скромный скрипт (хехе) в новых проектах.
Все пожелания, замечания, критику и полезные советы оставляйте в комментариях (я их читаю и стараюсь отвечать). По возможности кликайте на ссылки социальных сетей, чтобы поделиться с друзьями этой новой важной инормацией.
Checking if an input is empty with JavaScript
Last week, I shared how to check if an input is empty with CSS. Today, let’s talk about the same thing, but with JavaScript.
It’s much simpler.
Here’s what we’re building:
Events to validate the input
If you want to validate the input when a user types into the field, you can use the input event.
If you want to validate the input when a user submits a form, you can use the submit event. Make sure you prevent the default behavior with preventDefault .
If you don’t prevent the default behavior, browsers will navigate the user to the URL stated in the action attribute.
Validating the input
We want to know whether an input is empty. For our purpose, empty means:
- The user hasn’t typed anything into the field
- The user has typed one or more empty spaces, but not other characters
In JavaScript, the pass/fail conditions can be represented as:
Checking this is easy. We just need to use the trim method. trim removes any whitespace from the front and back of a string.
If the input is valid, you can set data-state to valid . If the input is invalid, you can set the data-state to invalid .
This isn’t the end yet. We have a problem.
When a user enters text into the field, input validation begins. However, if the user removes all text from the field, the input continues to be invalid.
We don’t want to invalidate the input if the user removes all text. They may need a moment to think, but the invalidated state sets off an unnecessary alarm.
To fix this, we can check whether the user has entered any text into the input before we trim it.
Here’s a Codepen for you to play with:
If you enjoyed this article, please support me by sharing this article Twitter or buying me a coffee ��. If you spot a typo, I’d appreciate if you can correct it on GitHub. Thank you!