Фильтры форм jQuery

Дата публикации:Февраль 13, 2011

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

:inputjQuery(«form:input»).css(«background», «#f60»);Заносит в выборку все элементы ввода, текстовые области, кнопки и элементы выбора для форм
:textjQuery(«form:text»).css(«background», «#f60»);Заносит в выбору все элементы ввода, которые имеют тип text
:passwordjQuery(«form:password»).css(«background», «#f60»);Заносит в выборку все элементы ввода, которые имеют тип password
:radiojQuery(«form:radio»).css(«background», «#f60»);Заносит в выборку все элементы ввода, которые имеют тип radio
:checkboxjQuery(«form:checkbox»).css(«background», «#f60»);Заносит в выборку все элементы ввода, которые имеют тип checkbox
:submitjQuery(«form:submit»).css(«background», «#f60»);Заносит в выборку все элементы ввода, которые имеют тип submit
:imagejQuery(«form:image»).css(«background», «#f60»);Заносит в выборку все изображения (классифицируется как фильтр для форм, однако используется и для регулярных изображений)
:resetjQuery(«form:reset»).css(«background», «#f60»);Заносит в выборку все элементы ввода, которые имеют тип reset
:buttonjQuery(«form:button») .css(«background», «#f60»);Заносит в выборку все элементы ввода, которые имеют тип button
:filejQuery(«form:file»).css(«background»,»#f60″);Заносит в выборку все элементы ввода, которые имеют тип file

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

...
jQuery(":text, :submit").css("background", "#f60");
...

Поделиться

2 комментария

  1. ashi says:

    А можно ли сделать так, чтобы кнопка «отправить комментарий» появлялась, когда выполнено необходимое условие, например, заполнены обязательные поля?

    • Architect Of Ruin says:

      Вот пример:

      $(function(){
          // Скрываем кнопку, если какое-либо из полей незаполнено
          $('form input').keyup(function(){
              if($('#input1').val() == "" || $('input2').val() == ""){
                  $('#submit').hide();
              }
              else {
                  $('#submit').show();
              }
          });
          // Не отправляем форму, если какое-либо из полей незаполнено
          $('form').submit(function(){
          if($('#1').val() == "" || $('#2').val() == ""){
              return false;
          }
          });
      });

      Естественно, в начале понадобится использовать CSS для скрытия кнопки (display:none)

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

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

Предыдущая запись:

Следующая запись: