BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

Главная » Вебмастеру » Проверка заполнения полей формы с помощью jQuery

Проверка заполнения полей формы с помощью jQuery

2015-06-26 / Вр:00:53 / просмотров: 10261

Немножко истории…

Вчера я работал над одним заказом, точнее дорабатывал его. В админке WordPress я создал поля для вставки телефонов, адресов и т.д.

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

Стал я думать над этим вопросом, и решение пришло! Можно осуществить проверку на заполнение полей формы с помощью JQuery Validation. Этот способ можно использовать на любых движках, сайтах и т.д.
Итак, плагин JQuery Validation проверяет поля формы на созданные вами правила и, если есть не соответствие, выводит динамические ошибки, которые сделал пользователь при заполнении формы.

Приступим к созданию формы.

  1. Создайте файл для формы. Если есть файл с формой, значит, пропустите первый пункт. Вот так выглядит код формы:
    <form id="myform-1" action="" method="post">
    <p>Ваше Имя:<br>
    <input type="text" name="login" /></p>
    <p>Ваш пароль:<br>
    <input type="password" name="password" /></p>
    <input type="submit" name="exit" value="Войти" />
    </form>
    

    Обратите внимание на id="myform-1", name="login", name="password". Эти названия я буду использовать, когда буду создавать правила проверки формы. Вы по желанию можете назвать своими именами.

  2. К файлу, где будет размещена форма, подключите библиотеку JQuery, плагин JQuery Validation и файл с расширением «.js», где будете писать свои правила для проверки формы.
    Вставьте этот код между тегами <head></head>:

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
    <script type="text/javascript" src="js/myscriptspravil.js"></script>
    
  3. Создайте папку «js» и создайте там файл «myscriptspravil.js» с таким кодом:
    $(document).ready(function(){
    
        $("#myform-1").validate({
      // правила для полей с именем и паролем
           rules:{ 
    
                login:{
                    required: true, // поле для имени обязательное для заполнения
                    minlength: 4, // в поле для имени должно быть не меньше 4 символов
                    maxlength: 16, // в поле для имени должно быть не больше 16 символов
                },
    
                password:{
                    required: true, // поле для пароля обязательное для заполнения
                    minlength: 6, // в поле для пароля должно быть не меньше 6 символов
                    maxlength: 16, // в поле для пароля должно быть не больше 16 символов
                },
           },
      // сообщение для поля с именем и пароля, если что-то было не по правилам
           messages:{
    
                login:{
                    required: " Это поле обязательно для заполнения", // сообщение для имени, если поле не заполнено
                    minlength: " Имя должно иметь минимум 4 символа", // сообщение для имени, если в поле меньше 4 символов
                    maxlength: " Максимальное число символов для имени - 16", // сообщение для имени, если в поле больше 16 символов
                },
    
                password:{
                    required: " Это поле обязательно для заполнения", // сообщение для пароля, если поле не заполнено
                    minlength: " Пароль должен иметь минимум 6 символов", // сообщение для пароля, если в поле меньше 6 символов
                    maxlength: " Максимальное число символов - 16", // сообщение для пароля, если в поле больше 16 символов
                },
    
           }
    
        });
    
    });
    

    Разберем немного код.
    Пункт №3.

    $("#myform-1").validate({
    

    «myform-1» – это название формы и взято оно здесь:

    <form id="myform-1" action="" method="post">
    

    Пункт №5.
    rules:{ – означает правила. Здесь нужно писать правила для полей между скобками rules:{   }

    Пункт №7.

    login:{  – здесь создаем правила для поля «Имя». Взяли имя поля из формы

    <input type="text" name="login" />
    

    Правила пишем через запятую между скобками login:{  }

    Пункт №13.

    password:{ – здесь создаем правила для поля с паролем. Взяли имя поля из формы

    <input type="password" name="password" />
    

    Правила пишем через запятую между скобками password:{  }

    Пункт №20.

    messages:{ – здесь выводим для каждого правила и для каждого поля сообщение об ошибке.

    В коде я написал к каждому пункту подсказки, так что проблем, я думаю, быть не должно.

  4. Можно создать стили CSS для ошибок:
    .error
    {
      color: red;
    }
    
Вот, что в результате должно получиться:

[смотреть демонстрацию]

Кстати, вы можете сохранить библиотеку JQuery и плагин JQuery Validation в папку «js». Тогда путь к файлам будет вот таким:

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script type="text/javascript" src="js/myscriptspravil.js"></script>

[скачать готовые файлы]

Для заметок:

Вот так выглядит шаблон файла для создания правил - «myscriptspravil.js»:

$(document).ready(function(){

    $("#название формы").validate({
       rules:{
// здесь пишем правила
       },
       messages:{
// здесь сообщение
       }

    });
});

Список правил:

required — поле обязательное для заполнения (true или false)

email — проверяет корректность e-mail адреса (true или false)

url — проверяет корректность url адреса (true или false)

date — проверка корректности даты (true или false)

dateISO — проверка корректности даты ISO (true или false)

digits — только цифры (true или false)

maxlength — максимальное кол-во символов

minlength — минимальное кол-во символов

rangelength — кол-во символов от и до (rangelength: [3, 8])

range — число должно быть в диапазоне от и до (range: [12, 20])

max — максимальное значение числа

min — минимальное значение числа

Можете посмотреть документацию по плагину и по правилам здесь.

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

18 Ответов на комментарий - Проверка заполнения полей формы с помощью jQuery

  1. Коля

    А что за тупой прикол с ссылками? Зачем временное ограничение? :?:

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Это не тупой прикол. Просто не всегда статью добавляю из домашнего компьютера. ФТП доступ у меня только на домашнем.
    Эту статью добавлял на работе, вот так вот. Сейчас добавлю пример и ссылки заработают.

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Все,можете смотреть демонстрацию и скачать готовые файлы. Пользуйтесь на здоровье. :-)

    Ответить

  2. Людмила Лао

    ухх, понимаю что тема нужная. И мне требуется, чтоб при регистрации роботы отсеивались, но как это встроить – мне не по зубам. Вижу эти крестики-нолики и глаза в кучу сразу…

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Людмила, я могу чем-то помочь?

    Ответить

    Людмила Лао отвечает:

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

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Зачем Вам на блоге нужна регистрация?
    Попробуйте поставить капчу.

    Ответить

    Людмила Лао отвечает:

    у меня установлена невидимая капча. спасает от спам-комментариев, но не помогает от регистрации…

    Степан => автор блога

    Степан => автор блога отвечает:

    Может невидимая капча рассчитана только на спам-комментарий, а не от регистрации.

  3. Людмила Лао

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

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    В админке, перейдите “Настройки” => “Общие” и уберите птичку над пунктом “Членство” (Любой может зарегистрироваться).
    Нового автора или редактора можно добавить вручную. “Пользователи” => “Добавить нового”.
    Чтобы забрать на блоге блок регистрации и входа, нужно зайти во “внешний вид” => “виджеты” и убрать блок “Мета”.
    Напишите, Людмила, если получили полный ответ на вопрос?! И обязательно напишите, решилась ли ваша проблема!

    Ответить

    Людмила Лао отвечает:

    Степан! :rose: :rose: :rose:
    Ё п р с т)) забыла совсем про эту злосчастную галочку, спасибо!! Виджет убирать не хочу, т.к. сама через него захожу, а в остальном, еще раз целую!!! Решили мою проблему, легко и просто. Ато замучилась удалять этих ботов. набивается за раз от 10 до 60.

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    ;-) :rose:

    Ответить

  4. Руслан

    Здравсвуйте! Вот.. сделал всё как Вы тут написали, но у меня ничего на траничке не происходит.. не знаю,в чем проблема, помогите, пожалуйста.

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Здравствуйте!
    Как я Вам могу помочь, если не вижу даже вашего кода.
    Скачать готовые файлы и по ним делайте аналог (под себя), так будет Вам проще

    Ответить

  5. nesnayka

    Я вот только не могу понять, зачем для проверки формы тащить на страницу 3 библиотеки, если нативным JS это делается в три строчки, да и кроме этого input’ы в html5 давно уже поддерживает атрибуты required и pattern? :|

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Во первых не 3 библиотеки а 2:

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
    

    Во вторых, хоть и в html5 можно использовать required и pattern, но эффект же не такой.

    Ответить

  6. nesnayka

    Да хоть и одну. Какой смысл? Библиотеки, а тем более фреймворки, можно (но не обязательно нужно) использовать тогда и только тогда, когда их РАЗЛИЧНЫЙ функционал будет востребован более 2-3 раз за один вызов.
    Это одно из “золотых правил” программизма, как и то, что код нужно выносить в функцию тогда, когда он используется больше одного раза.

    Относительно required, pattern и иных html ограничителей input’ов.
    Ну, немного не то в визуальном плане, но функцию они выполняют абсолютно точно такую же – не дают пользователю ввести некорректные данные. Хотя, как мне кажется, принципиального отличия в том, что сообщение будет показываться во вплывающем окошке или в поле рядом с блоком, нету. А вот на производительность подключение библиотеки влияет.
    А вообще, первоначальный посыл был к нативному JS, где валидацию одного поля и вывод сообщения можно сделать “в одну строку”.
    В псевдокоде это выглядит примерно так:

      inputBlock.onaction
      do
        if(inputBlock.inner == pattern) messageBlock.inner = "message_text";
      end
    

    одна из реализаций на JS :

      document.querySelector('input[name="login"]').onchange = function(){
        if(this.value.match(/[A-zА-я0-9\.\-]{4,}/g)) 
          document.querySelector('label[for="login"]').innerHTML = 'Логин должен быть не короче 4-х символов и состоять только из A-z, А-яб 0-9, точки и дефиса';
      }
    

    Ответить

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Subscribe without commenting

Метки: , , ,

Мои цели на 2017 год:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Довести количество статей до 750

4). Создать портфолио и мини интернет-магазин шаблонов

5). Создать книгу

6). Довести количество статей до 800

7). Добиться посещаемости 3000 человек/сутки

8). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 781
Количество страниц на блоге: 20
Количество рубрик на блоге: 28
Количество меток на блоге: 72
Количество комментариев на блоге: 4278