Polytech-soft.com

ПК журнал
0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Форма html js

Формы в HTML5: JavaScript и API для принудительной валидации форм

Содержание цикла статей «Формы в HTML 5»:

Часть 1 Формы в HTML5: Разметка;
Часть 2 Формы в HTML5: CSS;
Часть 3 Формы в HTML5: JavaScript и API для принудительной валидации форм.

В последней из трех статей на тему форм в HTML5 мы обсудим интеграцию JavaScript и constraint validation api . Если вы еще не готовы к этой теме, то вам стоит прочесть статьи Формы в HTML5: Разметка и Формы в HTML5: CSS чтобы вспомнить основы.

HTML5 позволяет нам применить валидацию форм на стороне клиента без использования JavaScript . Тем не менее, при использовании сложных форм ввода, нам понадобится усовершенствовать встроенную валидацию по следующим причинам:

  • не все браузеры поддерживают абсолютно все типы полей ввода и селекторов CSS ;
  • сообщения об ошибках используют общий текст (« пожалуйста, заполните это поле ») и их сложно типизировать;
  • селекторы :invalid и :required применяются при загрузке страницы до того, как пользователь начнет взаимодействовать с формой.

Используя JavaScript и Constraint Validation API , мы сможем расширить наши возможности. Имейте в виду, что код получится не сильно прозрачным, если мы будем учитывать большое число браузеров и типов полей ввода.

Перехватываем данные из формы

Первая часть валидации, до HTML5 , присоединяет к форме обработчик submit , который будет проверять поля, отображать ошибки и предотвращать событие подтверждения.

На уровне HTML5 браузер сначала выполнит свою собственную проверку — событие submit не произойдет, пока форма не станет действительна.

Затем, если вы захотите исполнить что-то более сложное, к примеру, отобразить свои сообщения об ошибках, сравнить или заполнить поля автоматически, вам придется выключить встроенную валидацию установив свойство noValidate в значение true :

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

Свойство поля .willValidate

Каждое поле формы имеет свойство .willValidate . Оно возвращает следующие значения:

  • true когда браузер для проверки будет использовать встроенную валидацию;
  • false когда браузер не будет проверять поле;
  • undefined когда браузер не поддерживает встроенную валидацию форм HTML5 , к примеру в IE8 .

Так как выше мы выключили встроенную валидацию, каждое поле вернет значение false .

Создадим собственный обработчик validateForm , который будет проверять, включена ли проверка браузеров у каждого поля:

Операция повторяется на всех полях elements формы и проверяет, являются ли элементы полями ввода, а не кнопками или группой полей. Обратите особое внимание на следующую строку:

Оба значения false и undefined — значения ложные, потому вы не сможете их проверить просто с помощью field.willValidate! И еще мы знаем о том, что код из первого блока будет иметь значение, только когда работает встроенная валидация. Однако…

Поддерживает ли браузер тип полей ввода?

Если вы помните, в первой части говорилось о том, что фолбэк в случае неподдерживаемых типов полей ввода — поле text . К примеру:

не имеет встроенной поддержки в Firefox 29 или IE11 . Эти браузеры (фактически) отобразят следующий код:

Но оба браузера поддерживают встроенную валидацию для типа поля text и потому field.willValidate не вернет значение undefined !

Поэтому сначала мы должны убедиться в том, что атрибуты type соответствуют свойствам объекта .type — и если это не так, мы должны реализовать проверку для фолбэка, к примеру, такую:

Метод .checkValidity()

В случае, когда встроенная валидация возможна, для проверки полей может быть использован метод .checkValidity() . Он вернет значение true , если проблем не обнаружит, или false , в остальных случаях.

Похожий метод .reportValidity() , который возвращает текущее состояние поля без его повторной проверки. Но он не поддерживается всеми браузерами, потому не столь полезен, как предыдущий.

Оба метода делают следующее:

  • возвращают свойство объектов .validity , которое поможет детально рассмотреть ошибки;
  • вызывают событие invalid при ошибке валидации. Это можно использовать для отображения ошибок, смены цвета полей и так далее. Обратите внимание, что нет соответствующего события valid , поэтому не забудьте сбросить стили ошибок и сообщений, при необходимости.

Объект Field .validity

Объект .validity имеет следующие свойства:

  • . valid – возвращает true , если поле без ошибок и false в противном случае;
  • .valueMissing – возвращает true , если значение в поле отсутствует, но оно требуется;
  • .typeMismatch – возвращает true , если значение не соответствует синтаксису, к примеру, не корректно введен адрес электронной почты;
  • .patternMismatch – возвращает true, если значение не соответствует выражению в атрибуте pattern ;
  • .tooLong – возвращает true , если значение превышает допустимую длину maxlength ;.
  • .tooShort – возвращает true , если значение меньше допустимого минимума minlength ;.
  • .rangeUnderFlow – возвращает true , если значение меньше допустимого min ;
  • .rangeOverflow – возвращает true , если значение больше допустимого max ;
  • .stepMismatch – возвращает true , если значение введено с недопустимым шагом step ;
  • .badInput – возвращает true , если запись не может быть преобразована в значение;
  • .customError – возвращает true , если поле имеет набор ошибок пользователя.

Не все эти свойства поддерживаются всеми браузерами, потому сильно не увлекайтесь. В большинстве случае достаточно возвращаемых значений от .valid или .checkValidity() для отображения сообщений об ошибках.

Поддержка объекта .validity устаревшими браузерами

Эмулировать объект .validity в устаревших браузерах можно вручную, к примеру:

Читать еще:  Ссылка на документ в html

Этим методом .validity.valid может быть протестирован в любом браузере.

Метод.setCustomValidity()

Методу .setCustomValidity() можно передать:

  • пустую строку. Это подразумевает, что поле ввода содержит корректные данные, потому и .checkValidity() и .validity.valid вернет значение true ;
  • строку, содержащую сообщение об ошибке, которое будет показано во всплывающем сообщении (если используется).

Сообщение пометит поле как поле с ошибочными данными и потому .checkValidity() и .validity.valid возвратят значение false и произойдет событие invalid .

Обратите внимание, что вы также можете проверить текущее сообщение, используя свойство поля .validationMessage .

Подведем итоги

Теперь, у нас есть простая, кроссбраузерная система проверки формы:

Методу LegacyValidation преднамеренно оставили самое простое; он проверяет регулярные выражения required, minlength, maxlength и pattern , и вам нужно добавить свой код для проверок email , URL , дат, чисел, диапазонов.

Это приводит к вопросу: если вы пишете код валидации для устаревших браузеров, зачем обращаться за помощью к встроенным API браузера? Отличный вопрос! Код, показанный выше, написан для поддержки валидации форм всеми браузерами, начиная с IE6 и выше. Это ведь не всегда нужно…

  • Вы можете не использовать код JavaScript для проверки простых форм. Пользователи устаревших браузеров в случае фолбэка попадут на валидацию со стороны сервера. И она должна быть всегда предусмотрена;
  • Если вам потребуется использовать более сложные формы, но нужно поддерживать только новейшие браузеры ( Internet Explorer 10 + ), вы можете удалить весь код проверки для устаревших браузеров. Дополнительно вам может потребоваться проверка полей дат, которые в настоящее время не поддерживаются в Firefox и IE ;
  • Даже если вам требуется код для проверки таких полей, как email, numbers и т.п. в IE9 и более ранних версиях, старайтесь не усложнять его и убирайте, как только он перестанет быть необходим. Сейчас требуется немного грязный код, но ситуация со временем улучшится.

Помните, что в HTML5 необходимо всегда использовать правильный тип поля. Браузер обеспечит использование встроенных элементов ввода и применит валидацию на стороне клиента, даже если Javascript будет отключен.

Данная публикация представляет собой перевод статьи « HTML5 Forms: JavaScript and the Constraint Validation API » , подготовленной дружной командой проекта Интернет-технологии.ру

Формы HTML5: JavaScript

В последней статье о веб-формах HTML5 мы рассмотрим интеграцию JavaScript и Constraint Validation API. Напомню, что две предыдущие были посвящены основам CSS и разметки HTML. Ознакомиться с ними можно, пройдя по ссылкам:

HTML5 позволяет производить валидацию форм на клиентской стороне без использования JavaScript. Для сложных форм, однако, встроенная валидация нуждается в определенных преобразованиях (усилении). Это связано с тем, что:

  • браузеры поддерживают не все типы HTML5 для полей ввода, и не все селекторы CSS
  • всплывающие блоки с ошибками содержат типовой текст («пожалуйста, заполните это поле»/«please fill out this field»); правка стиля для таких блоков несет в себе определенные трудности
  • стили :invalid и :required применяются после загрузки страницы, еще до того как пользователь начнет работать с формой

Облегчить работу пользователя с формами помогут JavaScript и Constraint Validation API. В статье мы попытаемся реализовать поддержку для как можно большего количества браузеров и типов полей ввода. Поэтому не стоит удивляться, если код получится не совсем прозрачным.

Перехват форм

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

В HTML5 браузер сперва выполняет свою собственную валидацию; событие submit запускается только после успешной валидации формы. Поэтому для того чтобы сделать что-то нестандартное, как то: отобразить свои ошибки, сравнение или автозаполнение полей – родную валидацию надо отключать, для этого свойству noValidate нужно задать значение true :

jQuery or Javascript

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

Свойство поля .willValidate

Каждое поле ввода имеет свойство .willValidate . Оно возвращает:

  • true когда браузер будет использовать встроенную валидацию для полей ввода
  • false встроенная валидация браузером не производится или
  • undefined поддержка родной HTML5 валидации в браузере не реализована (пример, IE8).

Так как выше мы отключили встроенную валидацию, каждое поле будет возвращать false . Давайте создадим обработчик validateForm , который будет проходить в цикле через все поля и проверять доступность у поля встроенной валидации:

jQuery or Javascript

Цикл проходит через все поля формы посредством свойства формы elements (любой элемент формы form можно получить, используя свойство form.elements , ); при прохождении осуществляется проверка, являются ли они полями ввода или нет (например, кнопками, select , и т.д. ). Следующему блоку кода следует уделить особое внимание.

Javascript

Теперь мы знаем, что код внутри первого блока будет задействован, только когда будет доступна встроенная валидация. Однако.

Поддерживает ли браузер тип полей ввода?

В первой статье говорилось, что вместо неподдерживаемых типов ввода используется тип text . Пример:

Если тип не поддерживается, например, в firefox 29 и IE11. Браузеры выведут:

Но, оба браузера поддерживают валидацию для типа text , поэтому field.willValidate не вернет undefined ! Следовательно, нужно проверить, что атрибут type соответствует свойству .type . В случае несоответствия надо создать резервную валидацию. Пример:

Читать еще:  Chrome html document pdf

Javascript

Метод поля .checkValidity()

Если встроенная браузерная валидация поддерживается, проверить поле можно методом .checkValidity() . В случае успешного прохождения валидации метод возвращает true , если же валидация не удалась, то – false .

Также есть метод .reportValidity() . Он возвращает текущее состояние без повторной проверки. Этот метод поддерживается не всеми браузерами и не столь эффективен, как метод .checkValidity() .

Также оба метода будут:

  1. устанавливают полям объект .validity , результатом чего является возможность проводить более полный анализ ошибок, и
  2. запускают событие invalid при неудачной валидации. Это можно использовать для показа ошибок, изменить цвета и т.д. Параллельного события valid не существует, поэтому при необходимости сообщения и стили для ошибок следует сбросить.

Объект поля .validity

Объект .validity имеет следующие свойства:

  • .valid – возвращает true , если поле не содержит ошибок, и false — если содержит.
  • .valueMissing – возвращает true , когда у поля есть required , а значение еще не было введено.
  • .typeMismatch – возвращает true при ошибочном синтаксисе значения (пример, неправильно форматированный адрес email)
  • .patternMismatch – возвращает true , если значение не соответствует шаблону регулярного выражения атрибута pattern .
  • .tooLong – возвращает true , если значение превышает maxlength .
  • .tooShort – возвращает true , если значение меньше minlength .
  • .rangeUnderFlow – возвращает true , если значение меньше, чем min .
  • .rangeOverflow – возвращает true , если значение больше, чем max .
  • .stepMismatch – возвращает true , если значение не соответствует step .
  • .badInput – возвращает true , если введенные данные не конвертируются в значение.
  • .customError – возвращает true , если поле имеет ошибки пользователя.

Некоторые свойства браузерам не поддерживаются. Как правило для вывода и сокрытия сообщения об ошибке достаточно свойства .valid или результата от .checkValidity() .

Поддержка .validity в старых браузерах

В устаревших браузерах объект .validity можно сэмулировать вручную:

Javascript

Благодаря чему .validity.valid можно протестировать во всех браузерах.

Метод поля .setCustomValidity()

Метод .setCustomValidity() может принимать:

  • пустую строку. Поле становится валидным, поэтому .checkValidity() и .validity.valid возвращают true , или
  • строку, которая содержит сообщение об ошибке, будет выведена в блоке с ошибкой (если оно используется). Сообщение также отмечает поле как дефектное, поэтому .checkValidity() и .validity.valid возвращают false и запускается событие invalid .

Текущее сообщение также можно проверить с помощью свойства поля .validationMessage .

Мы сделали простую кроссбраузерную систему валидации формы:

Javascript

LegacyValidation сознательно сделана простой. Она проверяет регулярное выражения pattern , required , minlength , maxlength ; но чтобы проверить email, URL, даты, числа, ранг, понадобится дополнительный код.

Отсюда возникает вопрос: если пишется код валидации полей для устаревших(всех) браузеров, зачем использовать родные APIs браузера? Логично. Код выше необходим только в том случае, если требуется поддержка всех браузеров, начиная с IE6 и выше, когда нужно, чтобы сайт был одинаково удобен для всех пользователей вне зависимости от используемых ими браузеров. Необходимо это не всегда.

  • для простых форм иногда можно обойтись без JavaScript кода. Что касается устаревших браузеров, то тут на помощь придет валидация со стороне сервера.
  • для более сложных форм, но когда поддерживаются только новые браузеры (IE10+), весь код для устаревших браузеров можно удалить. Дополнительный JavaScript понадобится только в случае использования формами дат. В настоящий момент поддержка дат в Firefox и IE не реализована.
  • даже если вы используете код для проверки полей типа email, цифр и т.д. в браузерах IE9 и старше, делайте его как можно проще. Когда поддержка браузера прекращается, код следует удалить.

Всегда используйте корректный HTML5 тип поля. В будущем в браузерах будет реализована поддержка встроенной валидации для элементов ввода, а валидация на стороне пользователя станет еще быстрее (даже при отключенном JavaScript).

JavaScript Формы

JavaScript проверка формы

Проверка HTML формы может быть выполнена с помощью JavaScript.

Если поле формы (fname) пустое, эта функция предупреждает сообщение и возвращает false, чтобы предотвратить отправку формы:

JavaScript Пример

Функция может быть вызвана при отправке формы:

HTML Пример формы

JavaScript может проверить ввод чисел

JavaScript часто используется для проверки числового ввода:

Пожалуйста, введите число от 1 до 10

Автоматическая проверка HTML формы

Для проверки HTML форм можно выполнять автоматически с помощью браузера:

Если поле формы (fname) пустое, то атрибут required не позволяет этой форме быть представленной:

HTML Пример формы

Автоматическая проверка HTML форм не работает в Internet Explorer 9 или более ранних версиях.

Проверка данных

Проверка данных — это процесс обеспечения того, чтобы вводимые пользователем данные были чистыми, правильными и полезными.

Типичными задачами проверки являются:

  • заполнил ли пользователь все необходимые поля?
  • заполнил ли пользователь допустимую дату?
  • заполнил ли пользователь текст в числовое поле?

Чаще всего целью проверки данных является обеспечение правильного ввода данных пользователем.

Валидация может быть определена многими различными методами и развернута многими различными способами.

Проверка на стороне сервера выполняется веб сервером после отправки входных данных на сервер.

Проверка на стороне клиента выполняется веб браузером перед отправкой входных данных на веб сервер.

HTML Проверка ограничений

HTML5 введена новая концепция проверки HTML под названием проверка ограничений.

HTML проверка ограничений основана на:

  • Проверка ограничений HTMLвходного атрибута
  • Проверка ограничений CSS Псевдо селектора
  • Проверка ограничений DOM Свойств и методов

Проверка ограничений входных атрибутов HTML

АтрибутОписание
disabledУказывает, что элемент ввода должен быть отключен
maxЗадает максимальное значение входного элемента
minЗадает минимальное значение входного элемента
patternЗадает шаблон значений входного элемента
requiredУказывает, что для поля ввода требуется элемент
typeЗадает тип входного элемента
Читать еще:  Скрипт кнопки сохранения html в pdf

Для получения полного списка перейдите по ссылке HTML Атрибуты ввода.

Проверка ограничений CSS псевдо селекторов

СелекторОписание
:disabledВыбирает входные элементы с указанным атриутом «disabled»
:invalidВыбирает входные элементы с недопустимыми значениями
:optionalВыбирает входные элементы с не указанным атриутом «required»
:requiredВыбирает входные элементы с указанным атриутом «required»
:validВыбирает входные элементы с допустимыми значениями

Для получения полного списка перейдите по ссылке CSS Псевдо классы.

Проверка формы в JavaScript

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

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

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

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

То есть сначала обращаемся к объекту 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[0].checked)?
document.form1.sex[0].value : document.form1.sex[1].value;

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

var sex;
if (document.form1.sex[0].checked) sex = document.form1.sex[0].value;
else sex = document.form1.sex[1].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 32)
bad += «Имя слишком длинное» + «n»;
if (pass.length 32)
bad += «Пароль слишком длинный» + «n»;
if (message.length

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

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

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

  • BB-код ссылки для форумов (например, можете поставить её в подписи):
  • Комментарии ( 51 ):

    Напиши пожалуйста отрывок кода, чтобы ясно было что и куда, связанный вот с этой строчкой «давайте добавим в тег атрибут «onSubmit» со значением «return check();»».

    Ссылка на основную публикацию
    Adblock
    detector