value, name, type и другие, соответствующие атрибутам HTML. И это действительно так.
Кроме того, предусмотрены и другие свойства, полезные для применения в сценариях. Для форм и их элементов (как объектов) определен также ряд методов. Надо обратить внимание и на события форм и их элементов. Задание соответствующих обработчиков этих событий позволяет создавать клиентские интерфейсы, гибко реагирующие на действия пользователя.
Говоря о работе с формами в JavaScript, выделим следующие моменты:
Проверка формы в 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.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Она выглядит вот так:
Комментарии ( 51 ):
Напиши пожалуйста отрывок кода, чтобы ясно было что и куда, связанный вот с этой строчкой «давайте добавим в тег атрибут «onSubmit» со значением «return check();»».
Формы 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 . В случае несоответствия надо создать резервную валидацию. Пример:
Javascript
Метод поля .checkValidity()
Если встроенная браузерная валидация поддерживается, проверить поле можно методом .checkValidity() . В случае успешного прохождения валидации метод возвращает true , если же валидация не удалась, то – false .
Также есть метод .reportValidity() . Он возвращает текущее состояние без повторной проверки. Этот метод поддерживается не всеми браузерами и не столь эффективен, как метод .checkValidity() .
Также оба метода будут:
- устанавливают полям объект .validity , результатом чего является возможность проводить более полный анализ ошибок, и
- запускают событие 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).
Работа с формами
Чекбоксы говорят будет или нет у будущего изделия соответствующие детали.
Радиокнопки указывают вариант исполнения какой-то детали, например застежки.
Если все чекбоксы включены, то форма отдает обработчику одинаковое количество значений detail и material
если какие-то из чекбоксов отключены, то обработчику значений detail передается меньше чем значений material на количество отключенных чекбоксов.
Как сделать так, чтобы если чекбокс отключен (и detail не передается обработчику), то и соответствующий этому чекбоксу material тоже обработчику не передавался. Чтобы обработчику всегда уходило равное количество значений detail и material?
Добавлено через 20 часов 55 минут
К сожалению там ничего похожего нет.
Теоретически я придумал, как упростить задачу, надо проверять состояние каждого чекбокса, и если он включен, — то его value должно быть равно указанному (как в примере), если он выключен, его value должно быть равно нулю, тогда обработчику всегда будет передаваться одинаковое количество detail и material.
вопрос, как организовать такую проверку и установку значений чекбоксов?
если можно, то на примере приведенной выше формы.
Работа с формами
Здравствуйте, Имеем 2 поля типа number в форме 12
Javascript | ||||||||||||||||||||||
15.06.2015, 10:55 | |||||||||||||||||||
15.06.2015, 11:01 | 5 | ||||||||||||||||||
Я бы посоветовал не маяться и использовать для этого чуть более сложную структуру, но более подходящую. Я сейчас говорю о data-bindinge. Связывание данных + шаблонизатор. Шаблонизатор будет решать, что нужно показывать, а что нет, что нужно дизейблить, а что нет. Данные пусть будут в виде объекта, которые и является правилом для шаблона. Это намного упростит управление и отображение элемента. Шаблонизатор можно взять например этот
|