Автор

Проверка обязательных для заполнения полей

Проверка обязательных для заполнения полей


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

Данный скрипт я использовал при создании сайта www.prtut.ru.

 

Демонстрация скрипта

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

Имя*:
Email*:
Описание*:

 

Описание

Для задания обязательных полей в форме используется произвольный аттрибут required, который прописывается лишь для полей требующих обязательного ввода. Например :

<INPUT TYPE=TEXT NAME="User Name" required>

 

Форма содержащая элементы ввода вызывает функцию checkRequired() при событии ONSUBMIT. В функцию передается лишь один параметр - имя формы. Для этой цели используется объект this который указывает на форму активную в данный момент.

<FORM NAME="demo" ONSUBMIT="return checkRequired(this)">

Функция checkRequired() проверяет каждый элемент в форме на наличие аттрибута required. Если атрибут обнаружен , то проверяется был ли сделан ввод.

 

JavaScript


function isEmpty(str)
 {
  // Проверка на пустую строку.
  for (var intLoop = 0; intLoop < str.length; intLoop++)
    if (" " != str.charAt(intLoop)) return false;
  return true;
 }
 
 function checkRequired(f)
  // Передается имя формы.
 {
  var strError = "";
  // тут будет хранится строка с сообщением
  for (var intLoop = 0; intLoop < f.elements.length; intLoop++)
  // Просмотрим все элементы формы
   if (null!=f.elements[intLoop].getAttribute("required"))
  // Если элемент формы имеет аттрибут "required" то
    if (isEmpty(f.elements[intLoop].value))
  // и если значение этого элемента формы отсутствует
  // т.е. пользователь ничего не ввел
      strError += " " + f.elements[intLoop].name + "\n";
  // то формируем строчку для сообщения (добавляем имя элемента)
  if ("" != strError)
  // если строка сообщения не пустая то
   {
     alert("Вы не заполнили поля :\n" + strError);
  // выводим окно с предупреждением
     return false;
   } else
  // иначе ничего не делаем
  return true
 }

 

Так как проверка выполняется на стороне клиента, и скрипт работает непосредственно в браузере пользователя, в Google Chrome, Mozilla Firefox, Opera и Яндекс.Браузер предупреждения смотрятся по разному:

 

 

 

Вот и все. Готово!

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru



Статьи по темеJS

Проверка обязательных для заполнения полей

Крупные заголовки сайта стали весьма популярны, эта тенденция развивается достаточно быстро на рынке веб-дизайна, сегодня мы бы хотели предоставить коллекцию анимированных фоновых заголовков для вашего вдохновения. Мы будем использовать Canvas и Javascript, чтобы создать анимированный фон для крупных заголовков.


Проверка обязательных для заполнения полей

Экспериментальная полноэкранная навигация, анимированная с использованием CSS и jQuery, которая расширяется в пределах круга.


Проверка обязательных для заполнения полей

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


Проверка обязательных для заполнения полей

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


Раскрутка в соцсетях

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


Перейти в Блог

Надёжный хостинг

С нами хостинг удобен и прост, как диван у вас дома. Вы с комфортом размещаетесь, а все внутренние пружины мы берем на себя.

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


Перейти на хостинг

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close