Фильтры форм 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 не будет опубликован. Обязательные поля помечены *

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

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

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