Яндекс.Метрика
    Поиск по тегу

    валидация форм


    Найдено: 2 записи

    Песочница

    Обработка заполняемой пользователем формы: как уменьшить сложность кода?

    Работая над написанием административного, да и пользовательского интерфейса, я не раз ловил себя на мысли — а все ли я делаю так, чтобы при минимуме усилий обеспечить оптимальное качество?

    Сегодня хотелось бы обсудить вопрос обработки ошибок ввода форм в веб-приложениях. Как, вы все еще всецело доверяете вводимым пользователем данным и считаете сидящее по ту сторону монитора существо священной коровой? Не бойтесь, это пройдет после первой же атаки, если принципы контроля ввода не станут вам ясны раньше. Впрочем, к делу.

    Программирую я на PHP, поэтому примеры серверного кода будут на этом языке.

    Представим, что мы решили дополнить свой проект формой для заказа обратного звонка. Мало ли — линии часто перегружены, клиент хочет почувствовать свою весомость, мода такая… ну в общем надо. Быстро накидываем простейший html, пишем обработчик — данные красиво легли в базу, в общем — практически готово. Осталось сделать самую малость — написать обработку ошибок. (Конечно, порядок разработки весьма условен). Каким образом можно это проверить введенную пользователем информацию на правильность и уведомить его о результате?

    В случае с правильно заполненной формой работы минимум. А вот если пользователь допустил ошибку и данные некорректны, вы вынуждены снова сгенерировать страницу и отправить ее пользователю. При этом крайне желательно значения всех заполненных полей сохранить, что увеличивает ваш код.

    Рассмотрим базовую обработку ошибок (считаем что пользовательские данные уже прошли основные проверки и фильтрации):

    <?php
    
    $errors = array();
    
    if ( empty($person) || empty($phone) || empty($question) )
    {
    	$errors[] = 'Не заполнены обязательные поля';
    }
    
    if ( count($errors) )
    {
    	$template->assign_switch('errors', 1);
    
    	$template->vars(array(
    		'ERRORS' => implode(' ', $errors),
    		'PERSON' => $person,
    		'PHONE' => $phone,
    		'QUESTION' => $question
    		)
    	);
    
    	$template->send();
    }
    ?>


    Нам хочется привнести некоторые удобства для клиента. И на помощь нам приходит…

    JavaScript

    <script language="text/javascript">
    <!-- //
    function form_submit()
    {
    	if  (
    		( document.forms['callback'].person.value == '' ) ||
    		( document.forms['callback'].phone.value == '' ) ||
    		( document.forms['callback'].question.value == '' )
    	)
    	{
    		alert('Не заполнены обязательные поля');
    	}
    
    	return;
    }
    // -->
    </script>


    Функция alert использована лишь в качестве учебного примера, по статистике часть пользователей закроет его не читая, потому что выводится оно в дизайне ОС и не воспринимается как часть веб-страницы.

    Еще раз обращу внимание на то, что серверная проверка все равно необходима.

    Каждый раз, когда меня просят рассказать зачем это нужно, я вспоминаю примерно год 2004, когда я, начинающий веб-разработчик, познакомился по переписке со славным парнем с Украины, бывшим тогда автором собственной CMS. Пытаясь перенимать опыт, я как-то поинтересовался у него, как он производит обработку ошибок. Выяснилось, что делает он это только при помощи JavaScript. Пришлось уже самому делиться опытом о том, что можно сохранить страницу на компьютер, подменить адрес обработчика формы и отправить данные без валидации. И если валидации не будет уже на сервере, некорректные данные будут восприняты как нормальные, а дальше все будет зависеть от логики приложения. Позже в процессе работы я часто встречал подобные уязвимости. Вывод напрашивается сам собой — если веб-приложение пишется без понимания особенностей взаимодействия браузера клиента и сервера, результат может быть разным.

    Проходит время, сложность форм растет и я обращаю свой взор на следующую технологию.

    AJAX

    Теперь проверка для удобства вынесена в отдельный метод и немного дополнена, в результате получаем примерно такой код:

    <?php
    
    $errors = array();
    
    if ( empty($person) || empty($phone) || empty($question) )
    {
    	$errors[] = 'Не заполнены обязательные поля';
    }
    
    $ajax = isset($_REQUEST['ajax']);
    
    if ( count($errors) )
    {
    	if ( empty($ajax) )
    	{
    		$template->assign_switch('errors', 1);
    	
    		$template->vars(array(
    			'ERRORS' => implode(' ', $errors),
    			'PERSON' => $person,
    			'PHONE' => $phone,
    			'QUESTION' => $question
    			)
    		);
    
    		$template->send();
    	}
    	else
    	{
    		$ajax_handler->send(array(
    			'errors' => 1,
    			'error_text' => implode(' ', $errors),
    			)
    		);
    	}
    }
    else
    {
    	$ajax_handler->send(array(
    		'errors' => 0,
    		'error_text' => '',
    		)
    	);
    }
    ?>


    Далее в браузере клиента мы можем показать тот же самый алерт или вывести сообщение любым другим удобным для нас способом. Юзабилити на высоте — не требуется перезагрузка страницы, удобство дальнейшей поддержки кода тоже — вся обработка ошибок собрана в одном месте.

    Вредный совет

    Пока форма состоит из небольшого количества полей, не так сложно при добавлении очередного поля модифицировать вывод после приема ошибочных данных. А если данных много? В этом случае есть желание облегчить себе работу и отказаться от такой полной поддержки старых браузеров, убрав вывод данных и получив вот такой код:

    <?php
    
    if ( count($errors) )
    {
    	if ( empty($ajax) )
    	{
    		header('Location: form.php?error_code=1');
    		exit();
    	}
    }
    ?>


    Мы существенно упростили себе работу по дальнейшей поддержке кода, при этом сознательно отказавшись от полной поддержки устройств с отключенным JavaScript. Чем-то пришлось жертвовать в угоду собственному удобству. Но такой подход не оправдан, если упор идет на качество разработки.

    Заключение

    На данный момент я продолжаю экспериментировать с проверками данных. Все еще ищу идеальное решение, которое было бы еще более оптимальным. С удовольствием выслушаю критику и обсужу все аспекты различных подходов с читателями.

    Javascript

    Валидация форм в JavaScript ч.1

    Вступление


    Добрый день, уважаемый читатель. В этой статье я бы хотел обратиться к теме проверки содержимого форм на стороне клиента. На заре становления языков, работающих на клиенте, эта задача была основной. Со временем эти языки обросли новыми возможностями (манипуляция DOM, управление стилями и пр.), но задача проверки форм не исчезла. Правда с появлением HTML5 стало возможным указывать такой тип поля формы, как email, и браузер сам возьмет на себя его проверку. Такая возможность на данный момент реализована в Opera, так что расчитывать на нее пока особо не приходится. Поэтому я бы и хотел рассмотреть этот вопрос основательно. В большинстве случаев валидация проводится так: каждому полю раздаётся id, и затем при submit'е вытаскиваем их, попутно проверяя содержимое. И всем хорош данный подход, кроме отсутствия в нем системности. Поэтому хочу предложить вашему вниманию свое решение данной проблемы.