При разработке страниц, содержащих HTML формы ввода, нужно всегда помнить, что есть обязательная информация, есть необязательная. Если пользователь при вводе, например, не заполнит обязательное поле «email», то на сервере в момент отработки скрипта и записи в базу данных может возникнуть ошибка.
Как правило, разработчики Web-приложений учитывают это, и если какие-то данные не были приняты на сервере CGI-скриптом, то последний возвращает опять страницу с «руганью» и формой для дозаполнения, тем самым избегая ошибки времени исполнения на сервере.
Но каждая передача данных на сервер — это лишнее время (с точки зрения пользователя), и лишняя загрузка сервера, на котором исполняется CGI-скрипт, что опять-таки за собой тянет увеличение времени ожидания. Поэтому, имея практически на каждом компьютере такие мощные средства, как JavaScript, реализованные в браузерах версий 4 и выше, вполне можно заставлять страницу саму себя проверять на корректность ввода данных в формы.
Известно, что HTML документ имеет объектно-ориентированную структуру, а посему, с помощью свойств и методов можно проверять объекты типа «элемент формы» на наличие в них данных.
В первую очередь, форма.
<form onSubmit = "return checkform(this)"> <table> <tr> <td>Name</td><td><input type="text" name="name" required></td></tr> <tr><td>E-mail</td><td><input type="text" name="email" required></td></tr> <tr><td>Comment</td><td><input type="text" name="comment"></td></tr> <tr><td><input type="submit"></td><td><input type="reset"></td></tr> </table> </form>
Стоит обратить внимание на две вещи:
- Вызов функции checkform() на событие onSubmit(т.е. на нажатие кнопки Submit)
- Атрибут required в двух полях — Name и E-mail
Значит в момент отправки формы вызывается функция checkform(). Вот она:
function checkform(f) { var errMSG = ""; // цикл ниже перебирает все элементы в объекте f, // переданном в качестве параметра // функции, в данном случае - наша форма. for (var i = 0; i<f.elements.length; i++) // если текущий элемент имеет атрибут required // т.е. обязательный для заполнения if (null!=f.elements[i].getAttribute("required")) // проверяем, заполнен ли он в форме if (isEmpty(f.elements[i].value)) // пустой errMSG += " " + f.elements[i].name + "\n"; // формируем сообщение // об ошибке, перечисляя // незаполненные поля // если сообщение об ошибке не пусто, // выводим его, и возвращаем false if ("" != errMSG) { alert("Не заполнены обязательные поля:\n" + errMSG); return false; } }
В общем — все понятно: передаем в качестве параметра форму, перебираем все элементы, если элемент имеет атрибут required, — проверяем его функцией isEmpty(). Если функция возвращает истину, — то строка пустая, если нет — то заполнена. Если строка пустая, то имя этого поля добавляется в переменную errMSG. Если errMSG оказывается не пустой строкой, то выводим сообщение об ошибке, и возвращаем в форму false, вследствие чего форма не отправляется на сервер.
Функция isEmpty():
function isEmpty(str) { for (var i = 0; i < str.length; i++) if (" " != str.charAt(i)) return false; return true; }
Проверка правильности заполнения формы во время ввода
Можно проверять заполнение формы во время ввода данных в элементы управления. При этом надо отрабатывать события на этих элементах.
В данном случае обрабатывается событие onKeyPress.:
<input type="text" size="4" onKeyPress ="if ((event.keyCode < 48) || (event.keyCode > 57)) event.returnValue = false;">
Где event.keyCode = скан-код нажатой клавиши.
Можно проверять элементы формы во время заполнения формы. Для этого нужно отрабатывать событие OnChange:
В данном случае после изменения поля отрабатывает скрипт, который проверяет, что было введено — текст или число, и изменяет стиль оформления данного элемента управления.:
<input type="text" size=3 title="Введите число" onChange="check_it();">
Если использовать проверку правильности заполнения формы с помощью JavaScript , то можно здорово облегчить жизнь и пользователю и себе, особенно, когда придется писать CGI-скрипт и предусматривать внештатные ситуации типа несовпадения типов данных.
Источник: internet-technologies.ru