Иногда на сайте необходимо сделать форму, в которую пользователь вводит какие-либо данные. Полей в форме может быть сколько угодно, однако всегда есть поля обязательные для заполнения. Как же проверить, заполнил пользователь нужное поле или нет. Есть два пути:
- Проверка в обработчике, т.е. пользователь заполняет нужные поля, отправляет форму, а дальше обработчик проверяет обязательные поля, и если какое либо поле не заполнено – возвращает пользователя обратно. Все просто, однако необходим механизм для передачи значений уже заполненных полей обратно в форму, который можно реализовать с помощью сессий, однако это не очень удобно.
- Проверка методами JavaScript – все гораздо проще (в плане работы самой формы). Задаем каждому полю событие onchange или любое другое реагирующее на действие пользователя (ну не onmouseover конечно, хотя наверное можно сделать даже забавно…), после которого написанная нами функция будет проверять , заполнены ли обязательные поля и разрешать или запрещать кнопку submit.
Первый вариант относится больше к разделу PHP, поэтому пока рассматриваться не будет. Рассмотрим более подробно второй. Первое что нам необходимо – сама форма:
<form id="form1" name="form1" method="post" action=" ">
<input type="text" name="field1" onchange="EnableButton()"/>
<input type="text" name=" field2" onchange="EnableButton()"/>
<input type="text" name=" field3" onchange="EnableButton()"/>
<input name="disable_button" type="submit" id=" disable_button " value="Submit" disabled="disabled"/>
</form>
Как видите, у кнопки Submit имеется атрибут disabled в значении disabled. Также у каждого поля формы есть событие onchange, при котором вызывается функция EnableButton(). Что же из себя представляет данная функция? Допустим, полями, обязательными для заполнения, являются field1 и field3, тогда функция EnableButton() будет выглядеть так:
function EnableButton()
{
with (document.forms.form1)
{
if (field1.value!=''&&field2.value!=’’)
{
disable_button.disabled=false;
}
else
{
disable_button.disabled=true;
}
}
}
К сожалению, я не нашел в JavaScript аналога PHP функции empty(), поэтому значения полей приходится сравнивать с пустой строкой. Еще на что стоит обратить внимание – оператор with (document.forms.form1). Для тех кто не знаком с JavaScript – выражение в скобках оператора with будет добавляться ко всем объектам, что позволяет значительно сократить запись функции. Без with EnableButton() выглядела бы следующим образом:
function EnableButton()
{
if (document.forms.form1.field1.value!=''&& document.forms.form1.field2.value!=’’)
{
document.forms.form1.disable_button.disabled=false;
}
else
{
document.forms.form1.disable_button.disabled=true;
}
}
Согласитесь – довольно громоздко.
В продолжении стоить отметить, что атрибут disabled можно использовать для любого элемента формы. Пример – заполнение информации о фирме – юридический и почтовый адрес. Два поля для двух адресов, однако можно добавить флажок checkbox (- совпадает с юридическим), отметив который, пользователь укажет что поле почтовый адрес обрабатывать не надо и можно добавить ему атрибут disabled.
