Иногда на сайте необходимо сделать форму, в которую пользователь вводит какие-либо данные. Полей в форме может быть сколько угодно, однако всегда есть поля обязательные для заполнения. Как же проверить, заполнил пользователь нужное поле или нет. Есть два пути:
- Проверка в обработчике, т.е. пользователь заполняет нужные поля, отправляет форму, а дальше обработчик проверяет обязательные поля, и если какое либо поле не заполнено – возвращает пользователя обратно. Все просто, однако необходим механизм для передачи значений уже заполненных полей обратно в форму, который можно реализовать с помощью сессий, однако это не очень удобно.
- Проверка методами JavaScript – все гораздо проще (в плане работы самой формы). Задаем каждому полю событие onchange или любое другое реагирующее на действие пользователя (ну не onmouseover конечно, хотя наверное можно сделать даже забавно…), после которого написанная нами функция будет проверять , заполнены ли обязательные поля и разрешать или запрещать кнопку submit.
Первый вариант относится больше к разделу PHP, поэтому пока рассматриваться не будет. Рассмотрим более подробно второй. Первое что нам необходимо – сама форма:
В этой статье разберём методы jQuery для чтения, добавления, изменения и удаления DOM-свойств. На практике подробно остановимся на рассмотрении таких свойств как disabled, checked и selected.
Что такое DOM-свойства элементов?
Когда браузер получает HTML-код запрашиваемой страницы, он разбирает его и строит в соответствии с ним DOM-дерево. При этом HTML-теги становятся объектами (узлами этого дерева), а атрибуты — их свойствами. При этом значения DOM-свойств может отличаться от соответствующих им атрибутов. Почему так происходит, а также более подробно узнать про DOM-свойства и атрибуты, и чем они отличаются друг от друга, можно в этой статье.
В качестве заключения можно отметить, что в большинстве случаев нужно работать с этими сущностями как с DOM-свойствами, а операции с атрибутами оставлять только для реализации тех моментов в которых это действительно нужно.
Атрибуты disabled, checked, selected и т.п.
Значения атрибутов ( disabled , checked , selected , hidden , readonly и т.п.) отличиаются от соответствующим им DOM-свойств. При этом значение атрибута — это всегда строка, а DOM-свойства — нет. Разные DOM-свойства могут иметь разные типы данных. Например, DOM-свойства disabled , checked , selected и другие, подобные этим, имеют логический тип.
Как в этом случае определяется значение этих DOM-свойств? Этот процесс описан в стандарте. В ооответсвии с ним, значение этих DOM-свойств ( disabled , checked и т.п.) равно true , когда такой атрибут присутсвует у тега и при этом не важно какое он имеет значение. В противном случае значения таких DOM-свойств равны false .
Методы jQuery для управления DOM-свойствами
В jQuery имеется два метода для управления DOM-свойствами элементов.
Первый метод — это prop .
Метод prop
Метод prop предназначен для выполнения различных операций над DOM-свойствами элементов.
Первая операция — это чтение значения DOM-свойства.
Синтаксис метода prop для получения значения DOM-свойства:
Пример, в котором рассмотрим принцип получения значения DOM-свойств с помощью метода prop :
Но DOM-свойства для элементов создаются не только в соответствии с теми атрибутами, которые есть у каждого из них в HTML. Для каждого элемента в соответствии с его встроенным классом создаётся целый набор стандартных для него DOM-свойств. Например, для элемента input (его класс HTMLInputElement ) создаётся один набор DOM-свойств, а для элемента a (его класс HTMLAnchorElement ) создаётся немного другой, но стандартный уже для него набор DOM-свойств.
Пример, в котором изменим значения DOM-свойств элемента:
Воторая операция — это изменение значения DOM-свойства.
Синтаксис метода prop для установления DOM-свойству нового знчаения:
Кроме этого варианта jQuery предлагает ещё два:
Пример, в котором изменим значения DOM-свойств элементов:
Пример, в котором установим заголовкам h2 и h3 , находящихся в элементе .article , идентификаторы, если их у данных элементов нет:
Удалить стандартное DOM-свойство у элемента нельзя. Но вы можете установить ему значение по умолчанию.
Пример, в котором установим для некоторого элемента, например button , значение DOM-свойства равным false .
Сейчас данный элемент в качестве значения DOM-свойства disabled имеет значение true , т.к. атрибут disabled присутствует у тега.
Теперь установим данному DOM-свойству значение false . Это изменение также повлияет на соответствующий ему атрибут. Он будет убран у элемента.
Пример, в котором переведём кнопку submit в активное состояние (т.е. установим ей свойство disabled равное false ) когда содержимое элемента input[name="search"] не будет равно пустой строке:
Принцип работы с checked ничем не отличается от disabled .
Примеры работы с checked
1. Пример, в котором установим флажок checkbox, а затем снимем его у него через 5 секунд:
2. Пример, в котором будем перед отправкой формы проверять состояния checkbox #agree , и если он не установлен в true , то выводить некоторое сообщение и отменять отправку формы на сервер.
3. Пример, в котором выполним две операции, связанные с checked . Первое — это установим после загрузки страницы второму элементу radio состояние checked , равное true . Второе — это создадим обработчик для события change , который будет выводить в #log значение выбранного переключателя:
Пример работы с selected
Пример, в котором выполним несколько действий. Первое — это установим состояние selected второму option . Второе — это создадим обработчик для события change , который будет выводить в #log выбранный пункт.
Пользовательские DOM-свойства
Элементы в DOM не ограничиваются перечнем только стандартных (встроенных) для каждого из них свойств. К любому элементу в DOM пользователь может добавить свои собственные свойства.
По сути, DOM элементы (узлы) – это обычные объекты JavaScript. Следовательно, к ним, как и к любым другим объектам можно добавлять свои свойства.
Осуществляется это также с помощью метода prop. Данный метод используется, когда нужно добавить, изменить или прочитать пользовательское DOM-свойство.
Рассмотрим добавление собственного DOM-свойства к элементам на следующем примере.
В этом примере добавим к элементам .counter пользовательское DOM-свойство count , которое будем использовать для хранения количество нажатий (click-ов):
Пользовательские DOM-свойства не отображаются в HTML коде и ни каким образом не сказываются отрисовку этого элемента на странице.
Удаление пользовательского DOM-свойства у элемента осуществляется с помощью метода removeProp .
Синтаксис метода removeProp:
Данный метод предназначен исключительно для удаления собственных DOM-свойств. Удалить стандартные (встроенные) DOM-свойства у элементов нельзя, вы можете им просто установить значение по умолчанию.
Пример, в котором будем добавлять и удалять у элемента #paragraph пользовательское DOM-свойство при нажатии соответственно на ту или иную кнопку:
Управление состоянием checked, disabled, selected через атрибуты
Изменять состояние checked, disabled, selected более предпочтительно через соответствующее DOM-свойство.
Но, тем не менее можно выполнять это и через атрибуты.
Например, чтобы перевести кнопку в неактивное состояние (disabled), ей нужно просто добавить атрибут disabled .
Для выполнения обратного действия, перевода элемента в активное состояние у него нужно удалить этот атрибут:
Для управления состоянием checked , readonly необходимо выполнять аналогичные действия.
В приведённом выше примере мы добавляли и удаляли атрибут disabled у элемента. При этом браузер при изменении атрибута изменял и значение соответствующему ему DOM-свойству. Т.е. при добавлении атрибута disabled устанавливал соответствующему DOM-свойству в данном случае disabled значение true , а при удалении этого атрибута – устанавливал false .
Браузер также при изменении значения DOM-свойства элемента, изменяет и его атрибут. Для DOM-свойств с логическим типом это работает так, с другими по-другому. Например, с id , class и style изменения происходяи один к одному, а например, с value изменения один к одному не работают.
Статья, которая может быть вам также интересной:
Поговорим о том, как можно деактивировать/активировать поля формы. Эта потребность может возникнуть в некоторых ситуациях, когда для пользователя нужно сделать невозможным изменение значения полей, либо наоборот. В html для деактивации полей существует атрибут disabled. Т.е. если атрибут присутствует, то поле неактивно, в ином случае, по умолчанию поле является активным. Более гибко использовать форму нам поможет библиотека JQuery.
Чтобы установить атрибут disabled для тега, можно воспользоваться функцией .prop().
Стоит обратить внимание на то, что в JQuery библиотеках версии 1.5 и ниже нет функции .prop().
Решается эта проблема альтернативной функцией .attr().
Деактивируем поле, с помощью функции .attr():
Чтобы снова активировать элемент, можно воспользоваться функцией .removeAttr()
Так же существует вариант, не имеет зависимости от версий JQuery. Можно обратиться непосредственно к объекту DOM, после возникновения какого-либо события.
Если вы имеете дело с одним элементом, то данный вариант работает немного быстрее предыдущих, однако функции, описанные выше удобны для создания зависимой связки нескольких полей.
