Здравствуйте, уважаемые читатели блога LifeExample, в статье "Проверка формы jQuery", хочу посветить немного времени на разработку одной очень нужной составляющей любого сайта. Говорить сегодня мы будем, о том, что такое проверка формы на заполнение, какими бывают проверки и как реализовать проверку формы на jQuery.
Для начала выясним, что же такое форма. В данном контексте под словом форма, мы будем понимать HTML элемент страницы FORM. Формой в HTML является совокупность элементов позволяющих пользователю изменить их содержимое, и отправить данные на сервер. Такими элементами могут являться:
Поля ввода (text,textarea);
Чекбоксы (checkbox);
Радиокнопки (radiobutton);
Выпадающие списки (select).
Какими бывают формы
Со значением форм разобрались, теперь давайте подумаем, где они используются, а также где и в какой проверке нуждаются.
На самом деле формы многих сайтов очень похожи друг на друга, по смыслу и назначению. Как правило, особо популярные и необходимые формы бывают трех типов
Форма регистрации;
Форма авторизации;
Форма обратной связи;
Согласитесь, что это очень распространённые элементы любого сайта, и сложно встретить тот ресурс, на котором бы не было данных форм.
Ну а раз, регистрация, авторизация и обратная связь, так важны, то и не менее важной становится поверка форм на корректность ввода. Иногда хватает проверки лишь на заполнение полей, но зачастую появляется необходимость в:
Проверке формы на корректность введенного e-mail;
Проверке формы на совпадение паролей;
Проверке формы по типу введенных данных (числовое поле);
Целью данной статьи я хочу выделить: простую реализацию с помощью библиотеки jquery, проверку формы.
Кстати говоря, о проверке формы на jQuery, стоит заметить, что это не очень безопасное занятие, в том случае если оно не поддерживается контрольной проверкой на стороне сервера.
Я имею в виду такую ситуацию. Представим, что данные введенные пользователем проверяются только jQuery и JavaScript’ом на стороне клиента, в этом случае какой бы хорошей не была проверка, всегда можно скопировать код формы страницы, и вручную послать любые не проверенные данные, в которых может запросто содержаться sql-инъекция. Поэтому я рекомендую реализовать еще и проверку полученных данных на PHP, это не только защитит вас от возможных атак, но и даст возможность работать с сайтом пользователям, у которых отключен JavaScript.
Ну, все хватит воды, давайте выделим основные задачи, и приступим к их выполнению.
Главная цель: Проверка формы jquery.
Задачи:
Создать HTML форму;
Форма должна содержать большое количество разных по назначению полей;
Написать скрипт-валидатор с использованием jQuery библиотеки.
Забыл упомянуть, я хочу создать пример проверки формы, такой который смог бы учесть в себе самые распространенные функции вышеперечисленных форм, для того чтобы в будущем обратившись к этому примеру, я и вы уважаемые читатели смогли бы быстро подкорректировать его под наши текущие нужды.
Создадим HTML форму (Шаг 1)
Я подумал, что больше всего проверок встречается в форме регистрации, поэтому мы возьмем ее за основу.
Скачать HTML форму регистрации ( Скачали: 287 чел. )
Внешне, наша стандартная форма регистрации будет выглядеть вот так:
Проверка формы регистрации
Основным для нас в скачанном файле является блок edit_form выводящий таблицу полей, со следующей структурой элементов:
<div class="edit_form">
<form action="" method="POST">
<h1>Проверка формы</h1>
<div class="messenger"> </div>
<table>
…
<input type="text" name="имена полей" value=""/>
…
</table>
<div class="send">
<input type="submit" name="submit" value="Отправить"/>
</div>
</form>
</div>
Обратите внимание, на заведенный пустой блок с классом messenger. Его назначением является вывод ошибок , для информирования пользователей.
Также в предложенном файле имеется часть, определяющая CSS стили и собственно та часть, в которой будет расположен код проверки формы jQuery.
<script>
$( function(){
//alert(1);
} );
</script>
Пишем проверку заполнения формы на jQuery (Шаг 2)
Основной и неотъемлемой частью процесса валидации формы является выявление пустых обязательных полей. Для того чтобы решить эту задачу можно воспользоваться вот таким кодом проверки, на чистом JavaScript:
function checkForm() {
var fields = new Array('input1','input2', 'input3');
var submit = true;
for (var x=0;x<fields.length;x++) {
if (document.forms.f2.elements[fields[x]].value == '') {
submit = false;
}
}
if (!submit) { alert('Не все обязательные поля заполнены!.'); }
return submit;
}
Но, так как мы ставили целью проверить форму jQuery. То второй вариант решения этой задачи нам подойдет больше:
$(function(){
var field = new Array("login", "pass", "confirmpass", "e-mail","about");//поля обязательные
$("form").submit(function() {// обрабатываем отправку формы
var error=0; // индекс ошибки
$("form").find(":input").each(function() {// проверяем каждое поле в форме
for(var i=0;i<field.length;i++){ // если поле присутствует в списке обязательных
if($(this).attr("name")==field[i]){ //проверяем поле формы на пустоту
if(!$(this).val()){// если в поле пустое
$(this).css('border', 'red 1px solid');// устанавливаем рамку красного цвета
error=1;// определяем индекс ошибки
}
else{
$(this).css('border', 'gray 1px solid');// устанавливаем рамку обычного цвета
}
}
}
})
if(error==0){ // если ошибок нет то отправляем данные
return true;
}
else{
if(error==1) var err_text = "Не все обязательные поля заполнены!";
$("#messenger").html(err_text);
$("#messenger").fadeIn("slow");
return false; //если в форме встретились ошибки , не позволяем отослать данные на сервер.
}
})
});
Данное решение полностью исключит возможность отправки формы на сервер, если обнаружит, хотя бы одно не заполненное поле из массива field. Кроме того скрипт выведет сообщение об ошибке в блок messenger и подсветит красной рамкой все не заполненные поля.
Пустые поля формы
Проверка корректности e-mail (Шаг 3)
Когда-то я уже писал как реализовать проверку е-mail на стороне сервера средствами языка PHP. Сегодня мы познакомимся с реализацией того же механизма с помощью клиентского языка JavaScript .
Для этого нужно немного представлять, что такое регулярные выражения, и для чего они нужны, о чем было рассказано в статье "Регулярные выражения в PHP".
Итоговый скрипт проверки корректности поля e-mail содержит в себе не много строк, и является достаточно простым для понимания.
Добавим в разрабатываемый скрипт проверки формы jquery, следующие строки кода:
1
2
3
4
var email = $("#email").val();
if(!isValidEmailAddress(email)){
error=2;
}
Вставить данный кусок кода нужно сразу перед вот этой строкой:
1
2
3
…
if(error==0){ // если ошибок нет то отправляем данные
…
А также необходимо прописать текст ошибки
1
if(error==2) err_text="Введен не корректный e-mail!";
Кроме всего этого нужно не забыть определить функцию, которая будет проверять корректность введенного e-mail:
1
2
3
4
function isValidEmailAddress(emailAddress) {
var pattern = new RegExp(/^(("[w-s]+") ([w-]+(?:.[w-]+)*) ("[w-s]+")([w-]+(?:.[w-]+)*))(@((?:[w-]+.)*w[w-]{0,66}).([a-z]{2,6}(?:.[a-z]{2})?)$) (@[?((25[0-5]. 2[0-4][0-9]. 1[0-9]{2}. [0-9]{1,2}.))((25[0-5] 2[0-4][0-9] 1[0-9]{2} [0-9]{1,2}).){2}(25[0-5] 2[0-4][0-9] 1[0-9]{2} [0-9]{1,2})]?$)/i);
return pattern.test(emailAddress);
}
Содержимое функции isValidEmailAddress() выглядит немного пугающе, но не стоит обращать внимание на сложное регулярное выражение. Ведь принцип её работы очень простой: если переданная строка соответствует правилам оформления e-mail адреса, то возвращается true, иначе false.
Проверка поля формы на jquery
Сравнение паролей (Шаг 4)
Для полного удовлетворения проверкой формы, нам осталось сравнить введенные пароли. Да же и не знаю, стоит ли описывать алгоритм, поскольку он настолько прост, что даже жалко тратить на него время, но все же раз обещал сделать полноценную проверку формы на jquery значит сделаю.
Весь алгоритм сводится к получению значений двух полей с паролями, и проверки их на соответствие:
//провека совпадения паролей
var pas1 = $("#pas1").val();
var pas2 = $("#pas2").val();
if(pas1!=pas2){
error=3;
$("#pas1").css('border', 'red 1px solid');// устанавливаем рамку красного цвета
$("#pas2").css('border', 'red 1px solid');// устанавливаем рамку красного цвета
}
Также как и с проверкой поля e-mail, нужно дописать в блок определения текста ошибки обработчик для error=3.
1
if(error==3) err_text="Пароли не совпадают";
Ну вот наша форма регистрации и готова, конечно, в реальности еще можно прикрутить к ней капчу с красивой картинкой , но для тестирования скрипта и проверки формы jquery нам вполне хватит уже написанного. Предлагаю вам скачать конечную версию скрипта, и проверить, все ли сходится с тем, что у вас получилось, следую тем действиям которые я описал.
Скачать скрипт проверка формы jQuery ( Скачали: 678 чел. )
Вывод
Результатом наших действия явилась вполне красивая проверка полей формы. Радует, что не пришлось прибегать к использованию дополнительных плагинов, таких как jquery.validate.js и jquery.form.js. Пишите свои вопросы, если таковые имеются в комментариях к статье.
