Автор

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

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


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

Данный скрипт я использовал при создании сайта 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 и Яндекс.Браузер предупреждения смотрятся по разному:

 

 

 

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


vk.com/club.ssdru

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


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

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

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


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

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


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

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


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

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


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close