Проверка пустых полей формы: универсальный способ
В своей практике мне тоже приходилось использовать разные варианты проверки заполнения полей формы в зависимости от конкретных условий. И в файле *.js присутствовало несколько функций для проверки разных форм, что увеличивало объём кода и ухудшало его восприятие.
В какой-то момент было принято решение написать вариант универсального способа проверки пустых полей, который можно будет использовать для любой формы с любым количеством обязательных полей. Необходимыми условиями такого способа были определены простота и отсутствие громоздких конструкций. В результате был найден способ, который полностью меня устроил и простотой, и универсальностью.
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:
I hope you found this useful. If you did, I hope you’ll share it with someone else. And feel free to reach out if you have any questions or comments.
Thanks for reading, all the best, and happy coding!
Want to become a better Frontend Developer?
Don’t worry about where to start. I’ll send you a library of articles frontend developers have found useful!
- 60+ CSS articles
- 90+ JavaScript articles
I’ll also send you one article every week to help you improve your FED skills crazy fast!
Want to become a better Frontend Developer?
Don’t worry about where to start. I’ll send you a library of articles frontend developers have found useful!
- 60+ CSS articles
- 90+ JavaScript articles
I’ll also send you one article every week to help you improve your FED skills crazy fast!
Проверка формы на JavaScript
В этой статье мы начнём разбираться с более сложными и функционально-законченными скриптами. Пройдём по шагам через все стадии — начиная с постановки задачи и заканчивая универсальным скриптом, готовым к употреблению. И начнём с проверки формы перед отсылкой на сервер.
Общие соображения и html-код формы
Проверка формы, пожалуй, одна из наиболее часто применяемых функций. Редкий сайт обходится без какой-либо её вариации, будь то простая отсылка сообщения на e-mail или форма сложного заказа в интернет-магазине. Польза скрипта очевидна — проверить, что пользователь заполнил все нужные поля перед отправкой и тем самым избежать проблемы получения пустых писем или отсутствия контактной информации отправителя.
Предположим, что форма у нас уже есть и состоит из следующих 4-х полей: имя, электронный адрес, тема сообщения и непосредственно само сообщение. Соответствующий html-код для такой формы будет выглядеть примерно так:
* — необходимые для заполнения поля
Заметьте, что в отличие от обычной формы непосредственно в теге <form> мы отслеживаем событие onsubmit и при его наступлении вызываем функцию проверки формы sendform().
Почему выбран именно такой способ вызова функции? Ведь можно было применить, например, событие onclick? Ответ простой — при использовании события onclick кнопку "submit" придётся заменить обычной кнопкой. И, в случае, если в броузере отключена поддержка javascript, мы не сможем отправить форму (!). Отслеживание же события onsubmit лишено этого недостатка, т.к. даже при отключенной поддержке скриптов форма будет отправлена.
Будем считать, что необходимых для заполнения полей у нас всего два: имя посетителя и его электронный адрес.
Если Вы внимательно присмотритесь к html-коду нашей формы, то заметите, что рядом с этими полями я поставил звёздочку, а в конце формы разместил сноску. Сделано это, разумеется, для удобства и элементарного уважения к пользователю.
Функция проверки формы перед отправкой
А теперь перейдём к главному — к написанию той самой функции, что будет непосредственно осуществлять проверку формы. Давайте подумаем, что нам от неё требуется? Ну, во-первых, проверить, что нужные поля заполнены, а во-вторых — отослать форму. В случае же, если несколько из обязательных полей пусты, нам нужно сформировать об этом сообщение пользователю и переместить курсор на соответствующий элемент.
Для начала напишем общую обвязку функции:
Применённый нами способ вызова функции через событие onsubmit в качестве результата работы функции требует возврата одного из логических значений: true или false. И, в зависимости от этого значения, форма либо будет отправлена, либо нет.
Теперь попробуем написать проверочную функцию, привязанную к данной конкретной форме. Как Вы помните, необходимых для заполнения полей у нас всего два: имя посетителя и его электронный адрес. Самое простое — это проверить содержимое каждого из обязательных полей на отсутствие текста:
Как видите, функция проверки состоит из двух идентичных блоков, различающихся только именем проверяемого поля. Давайте прокомментируем каждую строчку в этих блоках:
сначала проверяем, что данное поле является пустым. И если это так, то
выводим сообщение об ошибке при помощи встроенной функции alert(). После того, как пользователь закроет окошко, мы
воспользуемся методом focus() и переместим курсор на ошибочное поле. И, наконец,
выйдем из функции, установив флажок успешности выполнения в false.
В случае же, если проверяемое поле не было пустым, то соответствующий блок просто пропускается. При пропуске всех проверочных блоков функция в качестве результата возвращает true, что свидетельствует об успешной проверке.
Универсальная функция проверки
Если нам необходимо проверить всего два или три поля, то с таким методом проверки "по-одиночке" ещё можно смириться, но что, если их несколько десятков? А ведь такое не редкость — особенно в сложных анкетах. Поэтому мы немного модифицируем нашу функцию, чтобы она не зависела от количества проверяемых полей.
Первым делом мы создадим массив, где перечислим имена всех полей, которые требуют проверки:
Такой подход позволит нам очень легко добавлять и модифицировать список обязательных полей без непосредственного изменения кода самой функции.
Дополнительно к вышеописанному массиву мы добавим ещё один, который будет содержать текст ошибки для конкретного поля:
required_show = new array("Ваше имя", "электронный адрес");
Это позволит нам свободно варьировать текст об ошибках и правильно пользоваться русским языком, а не удовольствоваться неудобоваримыми фразами типа "name не введён".
Имея массив обязательных для заполнения полей, всю проверку можно осуществлять в цикле. Вот как будет выглядеть модифицированная функция проверки:
В цикле происходит проверка всех полей формы на совпадение с "обязательными". В случае, если совпадение произошло, проверка осуществляется аналогично тому, как это было описано выше, но с одним нюансом — введение массива с сообщениями об ошибках потребовало небольшой модификации функции alert(), так что теперь текст ошибки напрямую зависит от имени поля.
Вот, в общем-то, и всё. Данная функция вполне универсальна и с минимальными корректировками (в сущности — содержимое двух массивов) может быть адаптирована к любой форме.
Как проверить, пуст ли ввод с помощью JavaScript
На прошлой неделе я поделился, как проверить, пуст ли ввод с помощью CSS. Сегодня поговорим о том же, но с JavaScript.
Все намного проще.
Вот что мы создаем:
События для проверки ввода
Если вы хотите проверить ввод, когда пользователь вводит в поле, вы можете использовать событие input .
Если вы хотите проверить ввод, когда пользователь отправляет форму, вы можете использовать событие submit . Убедитесь, что вы запретили поведение по умолчанию with preventDefault .
Если вы не запретите поведение по умолчанию, браузеры будут перенаправлять пользователя по URL-адресу, указанному в атрибуте действия.
Проверка ввода
Мы хотим знать, пуст ли вход. Для наших целей пустой означает:
- Пользователь ничего не ввел в поле
- Пользователь ввел одно или несколько пустых пробелов, но не другие символы.
В JavaScript условия прохождения / отказа могут быть представлены как:
Проверить это легко. Нам просто нужно использовать метод trim . trim удаляет все пробелы с начала и с конца строки.
Если ввод действителен, вы можете установить data-state в valid . Если ввод неверен, вы можете установить data-state на invalid .
Когда пользователь вводит текст в поле, начинается проверка ввода. Однако, если пользователь удаляет весь текст из поля, введенные данные остаются недействительными.
Мы не хотим аннулировать ввод, если пользователь удаляет весь текст. Им может потребоваться время, чтобы подумать, но недействительное состояние вызывает ненужную тревогу.
Чтобы исправить это, мы можем проверить, ввел ли пользователь какой-либо текст во ввод, прежде чем мы trim это.
Вот вам Codepen, с которым можно поиграть:
Спасибо за прочтение. Эта статья вам помогла? Если это так, я надеюсь, вы подумаете о том, чтобы поделиться им. Вы могли бы помочь кому-то другому. Огромное спасибо!
Эта статья изначально была размещена в моем блоге.
Подпишитесь на мою информационную рассылку, если хотите, чтобы больше статей помогли вам стать лучшим разработчиком внешнего интерфейса.