Работа с данными пользователя, наверное, одна из самых нудных и трудоемких частей разработки любого приложения. В случае web приложений ситуация только усложняется. На мой взгляд, существует три основных источника проблем: 1) ошибки пользователя (тут вряд ли можно что-то сделать); 2) необходимость проверять данные на стороне сервера; 3) необходимость сообщать посетителю об ошибках без перезагрузки страницы. Кроме того, существуют два способа отправки данных формы: 1) обычный (с перезагрузкой страницы); 2) асинхронный (ajax запрос, без перезагрузки страницы). Естественно, эта ситуация привела к возникновению JavaScript библиотек, специально предназначенных для проверки данных форм перед их отправкой. Например. jQuery Validation Plugin, о нем, кстати, написана очень хорошая статья Проверка данных форм. Для prototype тоже есть несколько аналогичных библиотек: Dexagogo и JSValidate. Принцип их работы примерно одинаков. Создаете форму с правилами (обычно они указываются в атрибутах class полей формы), подключаете библиотеку, если нужно, пишите свои собственные правила. И все. При отправке формы библиотека проверит введенные значения и если не найдет ошибок – выполнит запрос, в противном случае – вставит в форму сообщения об ошибках. Теперь посмотрите на диаграммы отправки данных для обычного и ajax запросов.
Как видите, все недостатки налицо. Самое главное – дублируется код проверки данных на стороне браузера и сервера, причем на 2-х разных языках. К тому же, если все сделано правильно, посетитель никогда не увидит страницу с ошибками от сервера (отправляется при обычном запросе, если серверный скрипт нашел ошибку в данных). Все ошибки должна найти JavaScript библиотека и прервать отправку запроса. Посмотрим, что можно сделать. Убирать проверку на стороне сервера, мягко говоря, не безопасно. А вот на клиентской стороне ситуация интереснее. Если убрать проверку для обычного запроса, получим серьезное уменьшение скорости работы интерфейса (страница будет перезагружаться даже при неправильно заполненной форме). А вот в случае ajax запроса перезагрузки страницы не происходит.
Сервер отправляет только результат обработки запроса (либо описания ошибок). Скорость обработки таких запросов достаточно высокая (если, конечно, не отправлять в качестве описания ошибок картинку или видеоролик ). Да и во время загрузки можно какой-нибудь анимированный загрузчик показать. Поэтому, на мой взгляд, для ajax запросов бессмысленно делать проверку данных на стороне клиента. Теперь приведу пример небольшой формы, которая выполняет ajax запрос.
Этот пример может быть легко изменен под форму с любым количеством полей (о том, как это сделать, чуть позже). Серверная часть написана на PHP с использованием фреймворка CodeIgniter. Клиентская – JavaScript с использованием библиотеки prototype (версия должна быть не ниже 1.6.0). Рассмотрим контроллер (main. php). Примечание. Для тех, кто не знаком с CodeIgniter, поясню. При обращении к сайту будет вызван один из методов контроллера (по-умолчанию, index()). Подробнее о взаимодействии компонентов фреймворка можно почитать здесь.