Применение этого скрипта позволит Вам анализировать заполнение обязательных полей формы. В отличие от многих других анализаторов форм , в этом варианте проверка выполняется на стороне клиента а не на серверной части. И лишь в случае заполнения нужных полей , введенная информация передается на сервер. Если требуемые поля не заполненны, то выдается сообщение с перечислением незаполненных полей и форма не передается на сервер.
Данный скрипт я использовал при создании сайта www.prtut.ru.
Демонстрация скрипта
В примере все поля обязательны для заполнения.
Описание
Для задания обязательных полей в форме используется произвольный аттрибут 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
}
Так как проверка выполняется на стороне клиента, и скрипт работает непосредственно в браузере пользователя, в Яндекс.Браузер предупреждения смотрятся по разному:
Mozilla Firefox, Opera и