Проверка пустых полей формы: универсальный способ
Те, кто занимается созданием сайтов, в какой-то момент сталкиваются с необходимостью проверки заполнения пользователем полей формы, размещённой на сайте. Для этого создаётся какой-то вариант проверки пустых полей, который используется в своих проектах. Но для каждого случая количество полей, которые необходимо проверить, может быть разным. Это приводит к тому, что созданный вариант проверки необходимо изменять в зависимости от конкретных условий, и в дальнейшем у нас появляется уже несколько его модификаций.
Кроме того, на одной странице сайта может размещаться несколько форм, у каждой из которых будет разное количество обязательных для заполнения полей. В результате код будет включать в себя несколько блоков с одинаковыми функциями, но разными условиями, что не всегда является правильным решением.
В своей практике мне тоже приходилось использовать разные варианты проверки заполнения полей формы в зависимости от конкретных условий. И в файле *.js присутствовало несколько функций для проверки разных форм, что увеличивало объём кода и ухудшало его восприятие.
В какой-то момент было принято решение написать вариант универсального способа проверки пустых полей, который можно будет использовать для любой формы с любым количеством обязательных полей. Необходимыми условиями такого способа были определены простота и отсутствие громоздких конструкций. В результате был найден способ, который полностью меня устроил и простотой, и универсальностью.
Суть этого способа:
- В html-разметке для обязательных полей добавляется data-атрибут, который является маркером обязательности.
- Проверка выполняется только для тех полей, у которых присутствует данный атрибут.
- Возможность расширения функционала проверкой значения, указанного пользователем в поле.
Пример разметки формы:
Заголовок формы #1 Обязательно для заполнения Обязательно для заполнения
Пример кода проверки полей:
$('.js-form-validate').submit(function () < var form = $(this); var field = []; form.find('input[data-validate]').each(function () < field.push('input[data-validate]'); var value = $(this).val(), line = $(this).closest('.some-form__line'); for(var i=0;i.bind(this),2000); event.preventDefault(); > > >); >);
Пример реализации для двух форм на странице:
Как проверить заполненность полей в пошаговой форме?
Сделал пошаговую форму, но не приложу ума, как прикрутить проверку на заполненность обязательных полей каждого шага
Нужно, чтобы нажимая на кнопку «далее» переход к следующему шагу не осуществлялся, а обязательное поле подсвечивалось, пока не будет заполнено, только после этого у пользователя будет возможность двинуться дальше.
Назад Следующий шаг form div.tab < display:none; >a.back < display:none; >form input[type=submit] < display:none; >.tab input.empty_field < border-width: 2px; border-color: red; >$(document).ready(function() < // Ждём загрузки страницы var steps = $(".form-tabs").children(".tab"); // находим все шаги формы $(steps[0]).show(); // показываем первый шаг var current_step = 0; // задаем текущий шаг $("a.next").click(function()< // Событие клика на ссылку "Следующий шаг" if (current_step == steps.length-2) < // проверяем, будет ли следующий шаг последним $(this).hide(); // скрываем ссылку "Следующий шаг" $("form input[type=submit]").show(); // показываем кнопку "Регистрация" >$("a.back").show(); // показываем ссылку "Назад" current_step++; // увеличиваем счетчик текущего слайда changeStep(current_step); // меняем шаг >); $("a.back").click(function() < // Событие клика на маленькое изображение if (current_step == 1) < // проверяем, будет ли предыдущий шаг первым $(this).hide(); // скрываем ссылку "Назад" >$("form input[type=submit]").hide(); // скрываем кнопку "Регистрация" $("a.next").show(); // показываем ссылку "Следующий шаг" current_step--; // уменьшаем счетчик текущего слайда changeStep(current_step);// меняем шаг >); function changeStep(i) < // функция смены шага $(steps).hide(); // скрываем все шаги $(steps[i]).show(); // показываем текущий >>);
- Вопрос задан более трёх лет назад
- 134 просмотра
Комментировать
Решения вопроса 1
Делай добро и бросай его в воду.
Установить кнопку перехода в disabled (или убрать onclick, если это простой элемент).
И по таймеру проверять форму — динамически обновлять каждое поле и кнопку перехода в соответствии с соблюдением условий.
Ответ написан более трёх лет назад
Курсы javascript
При нажатии кнопки Submit происходит отправка формы без проверки заполнения поля «Ваше имя» с скрипта взят с форума. Облазила аналогичные темы, но причину по-прежнему не могу найти. Прошу помочь.
18.03.2014, 13:52
Регистрация: 27.05.2010
Сообщений: 33,038
непроисходит
18.03.2014, 14:01
Интересующийся
Регистрация: 16.12.2013
Сообщений: 21
Ок, допустим, что именно при таком раскладе не происходит (к сожалению, не могу уточнить информацию, так как редактирую действующий сайт в данный момент результаты заполнения формы отсылаются на чужой e-mail).
Тогда вопрос следующий: почему не подгружается нужная информация об ошибке в искомый div, а происходит перезагрузка страницы?
18.03.2014, 14:03
Регистрация: 27.05.2010
Сообщений: 33,038
kefalia,
всё подгружается — информация об ошибке в диве
ищите неправильные теги, форма в форме, одинаковые id.
Untitled
Последний раз редактировалось рони, 18.03.2014 в 14:06 .
18.03.2014, 14:17
Интересующийся
Регистрация: 16.12.2013
Сообщений: 21
Пересохранила файл еще раз, все заработало. Спасибо!
18.03.2014, 21:41
Интересующийся
Регистрация: 16.12.2013
Сообщений: 21
Доброй ночи
Пичаль заключается вот еще в чем:
Подозреваю, что я что-то намудрила с условиями.
Значение value передается только из поля с из остальных полей не передается ничего, даже если они заполнены.
Причем, если повесить на каждый input событие onblur=»alert(this.value)», то во всплывающем окне появляется значение, введенное в поле, а в функцию — не передается.
То есть, сначала проверяется email (так было сделано с целью эксперимента), затем проверяется имя и, даже если поле заполнено, при повторном нажатии на submit, остается надпись «Заполните данные о заказчике».
Проверка заполнения всех полей формы
В разных ситуациях количество таких полей разное, но всегда > 100. Есть ли какой-либо простой способ проверить сразу все поля на факт заполнения используя JavaScript или jQuery не прибегая к циклам и не перебирая каждый элемент по отдельности? Вариант минимум — получить ответ: все поля заполнены/есть незаполненные поля, вариант максимум — получить ответ: все поля заполнены корректными целочисленными значениям/есть некорректные данные (не все значения целочисленные)/ не все поля заполнены.
Отслеживать
28.8k 12 12 золотых знаков 59 59 серебряных знаков 118 118 бронзовых знаков