Проект Programmers.kz и школа hotPen3D2D предлагает Вам курсы по веб-дизайну, веб-программированию и компьютерной графике. Подробности здесь.

 
Информация к новости

Проверка заполняемости форм

Категория: WEB-программирование / JavaScript / Уроки JavaScript

Допустим Вы создали форму для отправки почты.


<center>
<form action="mailto:ваш е-mail?SUBJECT=From site" 
enctype=text/plain method=POST name="poster">

  <input type=hidden name="tip" value="Сообщение, 
отправленное с моего сайта...">

  <p>Введите Ваш E-mail:
  <input type="text" name="address" value="">
  <p>Введите тему сообщение:
  <input type="text" name="subject" value="">
  <p>Текст сообщения: <br>:
      <textarea name="adding" cols="30" rows="10">
      </textarea>
  <p> </p>
  <input type=Submit value="Отправить" name="Submit">
  <input type="reset" value="Очистить форму" name="reset">
</form>
<

Выглядеть она будет так: (ничего не нажимаем, пока не прочтем до конца)

Введите Ваш E-mail:

Введите тему сообщение:

Текст сообщения:

 

Если с кнопкой "Очистить форму" все вроде ясно, то кнопку "Отправить" мы перепишем так:


   <input type=button value="Отправить" name="submit" onclick="checkform();">

Посмотрим, как она она будет выглядеть:

Как видим, ничего не изменилось. Но изменилась реакция на нажатие формы. Теперь эта кнопка не будет просто отправлять форму, а вызовет функцию checkform().

А что в этой функции? У нас есть имя формы (оно задано в тэге <form>) - poster.

В Java Script оно будет выступать как объект, которым мы можем управлять:

  1. проверить наличие фокуса, т.е. какой элемент формы в данном случае активен, т.е. в каком мы сейчас работаем. Фокус на элемент формы может быть также установлен.
  2. проверить заполнено ли какое либо поле формы.

Методы (или функции) объекта вызываются через точку.

Итак, объект у нас - poster, а подъобъекты - имена полей формы.

Как можно проверить заполнено ли поле адреса? Очень просто!


    if (poster.address.value=="")
    {
     alert("Поле адреса пустое!
Отправлять некому");
     poster.address.focus();
    }

Что мы здесь пытались сделать? Проверить пустое ли поле адреса - address. Перевод конструкции звучит примерно так: "Если значение поля address формы poster равно пустоте (а две кавычки, идущие друг за другом, именно это и обозначают), то вызвать окошко предупреждения - alert и принудительно вернуть пользователя в это поле формы, т.е. установить фокус на поле address формы poster".

А как же отправить форму? Тоже просто!!!


         poster.submit();

Теперь, когда мы разобрались с нюансами рассмотрим функцию checkform(), то как она записывается и куда помещается.


function checkform()
{
    if (poster.address.value=="")
    {
     alert("Поле адреса пустое!
Отправлять некому!");
     poster.address.focus();
    }
    else if (poster.subject.value=="")
    {
     alert("Не указана тема сообщения!!!");
     poster.subject.focus();
    }
    else if (poster.adding.value=="")
    {
     alert("Вы хотите послать пустое письмо!");
     poster.address.focus();
    }
    else
     poster.submit();
}

Поместить эту функцию следует между тэгами <head> и </head> (лучше после <title>), не забывая о том, что это Java Script и включить его надо в обрамление <script> и </script>.

Теперь можете поэкспериментировать с формой помещенной в самом начале. Не бойтесь ее отправить. В самом худшем случае я получу от Вас письмо, а это даже приятно.
Источник: web-brodilka.ru

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