Меню
ГлавнаяExcel

Проверка формы в JavaScript. Проверка заполнения полей формы с помощью jQuery

Те, кто занимается созданием сайтов, в какой-то момент сталкиваются с необходимостью проверки заполнения пользователем полей формы, размещённой на сайте. Для этого создаётся какой-то вариант проверки пустых полей, который используется в своих проектах. Но для каждого случая количество полей, которые необходимо проверить, может быть разным. Это приводит к тому, что созданный вариант проверки необходимо изменять в зависимости от конкретных условий, и в дальнейшем у нас появляется уже несколько его модификаций.

Кроме того, на одной странице сайта может размещаться несколько форм, у каждой из которых будет разное количество обязательных для заполнения полей. В результате код будет включать в себя несколько блоков с одинаковыми функциями, но разными условиями, что не всегда является правильным решением.

В своей практике мне тоже приходилось использовать разные варианты проверки заполнения полей формы в зависимости от конкретных условий. И в файле *.js присутствовало несколько функций для проверки разных форм, что увеличивало объём кода и ухудшало его восприятие.


В какой-то момент было принято решение написать вариант универсального способа проверки пустых полей, который можно будет использовать для любой формы с любым количеством обязательных полей. Необходимыми условиями такого способа были определены простота и отсутствие громоздких конструкций. В результате был найден способ, который полностью меня устроил и простотой, и универсальностью.


Суть этого способа:

  • В html-разметке для обязательных полей добавляется data-атрибут, который является маркером обязательности.
  • Проверка выполняется только для тех полей, у которых присутствует данный атрибут.
  • Возможность расширения функционала проверкой значения, указанного пользователем в поле.

    • Пример разметки формы:


    Заголовок формы #1 Обязательно для заполнения Обязательно для заполнения

    Пример кода проверки полей:


    $(".js-form-validate").submit(function () { var form = $(this); var field = ; form.find("input").each(function () { field.push("input"); var value = $(this).val(), line = $(this).closest(".some-form__line"); for(var i=0;i
    ";
    endif;
    ?>

    Очень часто возникает необходимость добавления формы на сайт, ведь форма - это самый популярный способ общения пользователя с сайтом, и очень важно, чтобы данные, ведённые пользователем были корректными. И чтобы форма была отправлена с верными данными необходимо её перед этим проверить. И вот проверкой формы в JavaScript мы и займёмся в этой статье.

    Давайте для начала создадим форму, которую потом будем проверять:


    Ваше имя:



    Ваш пароль:



    Ваш пол:




    Выберите число:

    1
    2
    3



    Ваше сообщение:



    Согласитесь с нашими правилами:




    Загрузите файл:







    Вот такая форма. Надеюсь, что с HTML Вы знакомы и объяснять, думаю, ничего не стоит. Если что-то непонятно, то посмотрите на работу этого кода в браузере.

    Теперь поговорим о том, как получать значения из полей формы. Ведь прежде, чем их проверить, надо узнать, что написал там пользователь. Общий вид получения доступа к полю форму такой:

    Document.имя_формы.имя_поля.value;

    То есть сначала обращаемся к объекту Document , затем к его свойству Form (через имя формы), потом к имени поля данной формы, и, наконец, к значению поля . Давайте выведем все поля, которые подчиняются этому общему виду:

    Var form = document.form1;
    document.write(form.firstname.value + "
    ");
    document.write(form.pass.value + "
    ");
    document.write(form.number.value + "
    ");
    document.write(form.message.value + "
    ");
    document.write(form.rules.value + "
    ");
    document.write(form.hidefield.value + "
    ");
    document.write(form.fileupload.value + "
    ");
    document.write(form.sub.value + "
    ");
    document.write(form.but.value + "
    ");

    Это все поля, которые имеют свойство value , и к которым можно получить доступ таким образом.

    Теперь поговорим об одном особенном элементе формы - radio . Получим доступ к значению radio :

    Var sex = (document.form1.sex.checked)?
    document.form1.sex.value: document.form1.sex.value;

    Обратите внимание, что у нас есть два элемента radio , которые находятся в массиве sex . Индексы у них 0 и 1 . В данном скрипте мы проверяем, если у нас первый элемент включён (checked ), то присваиваем значение первого элемента, иначе присваиваем значение второго элемента. Кстати, если кто не понял, то это такая конструкция оператора условия IF . Разумеется, можно было бы написать и так:

    Var sex;
    if (document.form1.sex.checked) sex = document.form1.sex.value;
    else sex = document.form1.sex.value;

    Теперь, когда мы получили доступ ко всем полям, давайте с Вами, наконец, сделаем проверку формы. Но сначала давайте добавим в тег атрибут "onSubmit " со значением "return check(); ". Данный атрибут будет делать следующее: перед отправкой формы вызывать функцию, которая должна будет вернуть либо true , либо false . Если она вернёт true , то форма отправится на сервер, а если false , то форма не будет отправлена.

    Теперь создадим функцию check() , которая должна, во-первых, проверять полностью форму, сообщать пользователю об ошибках, а также возвращать true (если форма полностью правильная), либо false (если форма содержит ошибки).

    Function check(form) {
    var firstname = form.firstname.value;
    var pass = form.pass.value;
    var message = form.message.value;
    var rules = form.rules.value;
    var file = form.fileupload.value;
    var bad = "";
    if (firstname.length < 3)
    bad += "Имя слишком короткое" + "\n";
    if (firstname.length > 32)
    bad += "Имя слишком длинное" + "\n";
    if (pass.length < 3)
    bad += "Пароль слишком короткий" + "\n";
    if (pass.length > 32)
    bad += "Пароль слишком длинный" + "\n";
    if (message.length < 3)
    bad += "Сообщение слишком короткое" + "\n";
    if (rules != "on")
    bad += "Вы не согласились с правилами" + "\n";
    if (file.length == 0)
    bad += "Вы не выбрали файл для загрузки" + "\n";
    if (bad != "") {
    bad = "Неверно заполнена форма:" + "\n" + bad;
    alert(bad);
    return false;
    }
    return true;
    }

    В данном скрипте мы сначала получаем все данные, нуждающиеся в проверке, и записываем их в переменные. Затем создаём переменную bad , в которую записываем все некорректные данные. Затем идёт целый набор IF , которые проверяют поля в форме и записывают все ошибки в переменную bad . Затем, если переменная bad не пустая (то есть были ошибки), то выводим окно (alert() ) с ошибками. И возвращаем false , чтобы форма не была отправлена. Если переменная bad пустая, то дальше просто возвращаем true , чтобы форма была отправлена уже на обработку в "handler.php ".

    «Защитой от дурака» называется комплекс мер по пресечению ввода неправильной информации в форме. Например, если в поле требуется ввести положительное число от 0 до 10, то следует проверить, чтобы пользователь не ввёл текст или число, которое не лежит в указанном диапазоне, т.е. число не должно быть меньше нуля и больше десяти.

    Почему происходит ввод неправильной информации? Это в основном совершается по трём причинам.

  • Пользователь ошибся случайно, например, невнимательно прочитал, что ему требуется указать.
  • На веб-странице неоднозначно просят ввести данные, поэтому пользователю приходится гадать и делать предположение, что же в действительности от него хотят. При этом не всегда происходит совпадение мнений разработчика и пользователя.
  • Есть ряд людей, которые воспринимают инструкции как вызов и стараются поступить наоборот. Такие пользователи рассуждают примерно так: «Ага, меня просят ввести число. А что будет, если я укажу буквы?». После чего задают явно неправильную информацию и смотрят, к чему это приведёт.

    • Следует понимать, что точные и правильные формулировки хотя и снижают вероятность возникновения ошибок, но никак не спасают от них. Только технические средства на стороне сервера позволяют получить требуемый результат и избежать ввода неправильной информации. Тем не менее, ревизия или, как её ещё называют, валидация на стороне клиента позволяет быстро проверить данные, вводимые пользователем, на корректность, без отправки формы на сервер. Таким образом экономится время пользователя и снижается нагрузка на сервер. С позиции юзабилити тоже имеются плюсы - пользователь сразу получает сообщение о том, какую информацию он указал неверно и может исправить свою ошибку.

    Обязательное поле

    Некоторые поля формы должны быть обязательно заполнены перед их отправкой на сервер. Это, к примеру, относится к форме регистрации, где требуется ввести логин и пароль. Для указания обязательных полей используется атрибут required , как показано в примере 1.

    Пример 1. Атрибут required

    HTML5 IE 10+ Cr Op Sa Fx

    Обязательное поле

    Логин:

    Пароль:

    Обязательные поля должны быть заполнены перед отправкой формы, иначе форма на сервер не отправится и браузер выдаст об этом предупреждение. Вид сообщения зависит от браузера, например Chrome выводит всплывающую подсказку, как показано на рис. 1.

    Рис. 1. Обязательное поле не заполнено

    Корректность данных

    Исходно имеется два поля, в котором вводимые пользователем данные проверяются автоматически. Это веб-адрес и адрес электронной почты. Браузер Chrome также проверяет на корректность поле с календарными данными, но только потому, что у него не предусмотрен интерфейс выбора календаря щелчком мыши. Для этих элементов характерны следующие правила.

    • Веб-адрес ( ) должен содержать протокол (http://, https://, ftp://).
    • Адрес электронной почты ( ) должен содержать буквы или цифры до символа @, после него, затем точку и домен первого уровня.

    У браузеров несколько различается политика по проверке данных пользователя. К примеру, Opera подставляет протокол http:// перед введённым текстом автоматически, тогда как другие браузеры ждут его от пользователя. Chrome и Opera требуют, чтобы в почтовом адресе была точка, для Firefox она не обязательна.

    В примере 2 показана форма с обязательными полями, в которой два поля проверяется браузером.

    Пример 2. Корректность данных

    HTML5 IE 10+ Cr Op Sa Fx

    Корректность данных

    Заполните форму (все поля обязательны)

    Имя:

    Email:

    Сайт:

    Opera проверяет элемент формы только при наличии атрибута name.

    Что происходит в Opera при вводе неверных данных показано на рис. 2.

    Рис. 2. Предупреждение о неправильных данных

    Шаблон ввода

    Некоторые данные нельзя отнести к одному из видов элементов формы, поэтому для них приходится использовать текстовое поле. При этом их ввод происходит по определённому стандарту. Так, IP-адрес содержит четыре числа разделённых точкой (192.168.0.1), почтовый индекс России ограничен шестью цифрами (124007), телефон содержит код города и конкретное количество цифр часто разделяемых дефисом (391 555-341-42) и др. Браузеру необходимо указать шаблон ввода, чтобы он согласно нему проверял вводимые пользователем данные. Для этого используется атрибут pattern , а его значением выступает регулярное выражение . Некоторые типовые значения перечислены в табл. 1.

    В примере 3 просят ввести шестнадцатеричное значение цвета (#ffcc00) и если оно не лежит в этом диапазоне, браузер выводит сообщение об ошибке.

    Пример 3. Шаблон ввода

    HTML5 IE 10+ Cr Op Sa Fx

    Ввод цвета

    Введите шестнадцатеричное значение цвета (должно начинаться с #)

    На рис. 3 показано предупреждение в браузере Chrome.

    Рис. 3. Введённые данные не соответствуют шаблону

    Отмена валидации

    Валидация не всегда требуется для формы, к примеру, разработчик пожелает использовать универсальное решение на JavaScript и дублирующая проверка браузером ему уже ни к чему. В подобных случаях необходимо отключить встроенную валидацию. Для этого применяется атрибут novalidate тега . В примере 4 показано использование этого атрибута.

    Пример 4. Отмена валидации

    HTML5 IE 10+ Cr Op Sa Fx

    Атрибут novalidate

    Для аналогичной цели применяется и атрибут formnovalidate , который добавляется к кнопке для отправки формы, в данном случае к тегу . В этом случае форма из примера 4 будет иметь следующий вид.