Только для читателей Lifeexample возможно открыть интернет-магазин на Moguta.CMS со скидкой в 15%

<<< jQuery сортировка таблицы || Настройка SVN >>>

Проверка формы jQuery

16.05.2012
Проверка формы jQuery

Здравствуйте, уважаемые читатели блога LifeExample, в статье "Проверка формы jQuery", хочу посветить немного времени на разработку одной очень нужной составляющей любого сайта. Говорить сегодня мы будем, о том, что такое проверка формы на заполнение, какими бывают проверки и как реализовать проверку формы на jQuery.

Для начала выясним, что же такое форма. В данном контексте под словом форма, мы будем понимать HTML элемент страницы FORM. Формой в HTML является совокупность элементов позволяющих пользователю изменить их содержимое, и отправить данные на сервер. Такими элементами могут являться:

  • Поля ввода (text,textarea);
  • Чекбоксы (checkbox);
  • Радиокнопки (radiobutton);
  • Выпадающие списки (select).

Какими бывают формы

Со значением форм разобрались, теперь давайте подумаем, где они используются, а также где и в какой проверке нуждаются.

На самом деле формы многих сайтов очень похожи друг на друга, по смыслу и назначению. Как правило, особо популярные и необходимые формы бывают трех типов

  • Форма регистрации;
  • Форма авторизации;
  • Форма обратной связи;

Согласитесь, что это очень распространённые элементы любого сайта, и сложно встретить тот ресурс, на котором бы не было данных форм.

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

  • Проверке формы на корректность введенного e-mail;
  • Проверке формы на совпадение паролей;
  • Проверке формы по типу введенных данных (числовое поле);

Целью данной статьи я хочу выделить: простую реализацию с помощью библиотеки jquery, проверку формы.

Кстати говоря, о проверке формы на jQuery, стоит заметить, что это не очень безопасное занятие, в том случае если оно не поддерживается контрольной проверкой на стороне сервера.

Я имею в виду такую ситуацию. Представим, что данные введенные пользователем проверяются только jQuery и JavaScript’ом на стороне клиента, в этом случае какой бы хорошей не была проверка, всегда можно скопировать код формы страницы, и вручную послать любые не проверенные данные, в которых может запросто содержаться sql-инъекция. Поэтому я рекомендую реализовать еще и проверку полученных данных на PHP, это не только защитит вас от возможных атак, но и даст возможность работать с сайтом пользователям, у которых отключен JavaScript.

Ну, все хватит воды, давайте выделим основные задачи, и приступим к их выполнению.
Главная цель: Проверка формы jquery.

Задачи:

  1. Создать HTML форму;
  2. Форма должна содержать большое количество разных по назначению полей;
  3. Написать скрипт-валидатор с использованием jQuery библиотеки.

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

Создадим HTML форму (Шаг 1)

Я подумал, что больше всего проверок встречается в форме регистрации, поэтому мы возьмем ее за основу.

Скачать HTML форму регистрации ( Скачали: 2327 чел. ) 

Внешне, наша стандартная форма регистрации будет выглядеть вот так:

Проверка формы регистрации

Основным для нас в скачанном файле является блок edit_form выводящий таблицу полей, со следующей структурой элементов:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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.

1
2
3
4
5
<script>
    $( function(){           
        //alert(1);
     } );
</script>

Пишем проверку заполнения формы на jQuery (Шаг 2)

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

1
2
3
4
5
6
7
8
9
10
11
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. То второй вариант решения этой задачи нам подойдет больше:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
    $(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 значит сделаю.

Весь алгоритм сводится к получению значений двух полей с паролями, и проверки их на соответствие:

1
2
3
4
5
6
7
8
//провека совпадения паролей
            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 ( Скачали: 4745 чел. ) 

Вывод

Результатом наших действия явилась вполне красивая проверка полей формы. Радует, что не пришлось прибегать к использованию дополнительных плагинов, таких как jquery.validate.js и jquery.form.js. Пишите свои вопросы, если таковые имеются в комментариях к статье.

Чтобы не пропустить публикацию следующей статьи подписывайтесь на рассылку по E-mail или RSS ленту блога.

Нравится

Комментарии

  • Скрипт для проверка форма отли4но. Спасибо

  • Dmitry

    аффтору +

  • Иван

    Большое спасибо , не знаю что бы делал без ваших урков

  • Вадим

    Спасибо большое 🙂 Вопрос такой, а как сделать редирект на определенную страницу, если пользователь ввел все данные правильно?

    • Если нужен редирект без проверки данных на серверной стороне, то средствами JavaScript достаточно прописать такую строку:

      1
      location="http://lifeexample.ru"
  • Вадим

    А если с проверкой данных? если все данные введены верно, то после нажатия кнопки идет редирект на определенный сайт/страницу.

    1
    2
    3
    if(error==0){        
    header('Location: http://newdomain.com/');
    exit();

    Такое не проходит.

    • То что вы выложили, должно работать на PHP.
      exit(); — можно не использовать.

  • Поэтому я рекомендую реализовать еще и проверку полученных данных на PHP, это не только защитит вас от возможных атак, но и даст возможность работать с сайтом пользователям, у которых отключен JavaScript.
    +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
    Основная масса юзеров, отключающих яваскрипт — это хулиганы , кидающие injections через формы. Поэтому, достаточно вывести предупреждение, что -«Неплохо бы включить яваскрипт в браузере, товарищ !».

  • Алексей

    Подскажите добавить проверку поля на:
    \d Цифра (0-9),
    только русские буквы,
    телефон сот+город

  • Erlan

    Спасибо!

  • dudi

    20кб многовато вышло.

  • сергей

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

    • Алексей

      Дай форме id=»form1″ например
      и замени так строку
      $(«#form1»).submit(function() {// обрабатываем отправку формы

  • Алексей

    Если 2 формы на странице, то в строке $(«form»).submit(function() {// обрабатываем отправку формы
    форме пишем id=»form1″
    меняем на
    $(«#form1»).submit(function() {// обрабатываем отправку формы
    Я так сделал у себя…

  • Алексей

    Подскажите, как выпадной список select проверять?

    • По значению value выбранной опции. Находите option с атрибутом selected и берете у него value.

  • Tamonius

    а как проверить группу radio? при использовании if(!$(this).attr(«checked»)==true) оно проверяет каждое поле input а не группу ((

    • Например .each можно использовать. Скорее всего есть более простое решение, почитайте документацию.

  • Oxana

    Спасибо за скрипт! Успехов вам!

  • Денис

    Скрипт, что бы я не вводил в поле email (правильный или неправильный) все равно выводит ошибку error2 (неправильный E-mail. Но не суть — эту функцию я заменил.
    Мне нужно, что бы поле E-mail было необязательным, но если пользователь захочет его указать — поле проходило валидацию.
    Сейчас, если убираешь имя формы из field — все равно форма проходит валидацию и поле остается обязательным (пока не заполнишь не отправишь) — укажите правильный email.

    • Юра
      1
      2
      3
      4
      if ($("#email").val())
      {
        // Проверка на валидацию
      }
  • «Не корректный» — раздельно? За скрипт спасибо!

  • Василий

    Спасибо за отличную статью. А как на javascript можно реализовать проверку переменной, которая должна содержать только цифры (номер тел. например)?

  • NVV-WEB

    Спасибо, информативная статья.

  • Ivan

    if(error==0){
    window.location.href = «http://www.google.com»;
    return true;
    }
    Не работает!!!
    Не могу понять почему.

  • Владимир

    Добрый день. Спасибо за Ваш блог. После прочтения Вашей статьи по проверке формы всё получилось кроме одной детали. Даже двух!
    1. Если одно, или несколько полей ввода не заполнено, то эти поля выделяются рамкой красного цвета. Всё работает корректно. Но, если поставить галочку «checkbox» в отдельной строке, то по логике одно поле пропадает(так и задумано) и, по идее оно не должно влиять на процесс отправки данных. Но, к сожалению, хоть это поле и становится невидимым, из-за него программа выдаёт ошибку и не отправляет данные. Как сделать так, чтобы при нажатой галочке «checkbox» и исчезнувшем поле(которое при отжатой галочке является обязательным для ввода) программа не выдавала ошибку?
    2. Незаполненные поля выделяются красной рамкой, но при этом не появляется надпись if(error==1) var err_text = «Не все обязательные поля заполнены!»; Спасибо.

  • Владимир

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

  • DlMON

    + нужно проверку на пустой пароль дописать. А то если пароль оба пароля оставить не заполненными, скрипт отдает данные на сервер 🙁

  • Виктор

    А как сделать, чтобы при удачной отправке вылезало окошко с сообщением «Форма отправлена»?

    1
    2
    3
    4
    5
    6
    if(error==0){
    var suc_text = "Форма отправлена успешно!";
    $(".messenger").html(suc_text);
    $(".messenger").fadeIn("slow");
    return true;
    }

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

    1
    return true/false

    . Но дальше все равно не могу пройти.

  • Kladr Gnivc

    Спасибо за скрипт, После подключения скрипта, форма стала отправляться два раза, кто нибудь сталкивался с таким явлением ?

  • Deny

    Спасибо вам большое за скрипт. Потратил 3 часа на поиски нормального примера который работает и наконец нашел ваш. Прямо выручили. Успехов вам.

  • Оставить комментарий

    Не отвечать

    Подписаться на комментарии к этой статье по RSS

    Яндекс.Метрика