|
|||||||||
Автор: Alexander Suhhinin Проверка заполнения формы с помощью JavaScript во время отправки данных на сервер.При разработке страниц, содержащих 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>Стоит обратить внимание на две вещи:
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; }Все просто до безобразия. Эти две функции написаны на все случаи жизни - не привязаны не к именам полей, ни к именам форм. Их можно использовать в любых HTML формах для проверки правильности форм. Главное - необходимым полям установить атрибут required, и в тэг описания формы вставить вызов функции checkform(this).
Можно проверять заполнение формы во время ввода данных в элементы управления.
При этом надо отрабатывать события на этих элементах. Например, попробуйте ввести
в поле не цифру: |
|||||||||
![]() |
![]() |