→ При разработке сайта лендинг в подарок! ЖМИ! ←
Апр
5

Проверяем данные формы «на лету»

Итак, сегодня у нас проверка формы «на лету». Для этого нам понадобится JQuery, плагинчик к нему и немного свободного времени.

Подключение и проверку будем проводить по шагам. Поехали!

Шаг 1. Подключаем все необходимые файлы

1
2
3
4
5
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js" type="text/
javascript"></script>

<script src="js/jquery.validationEngine-en.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.validationEngine.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css"/>

Шаг 2. Вставляем форму на страницу и прописываем в неё поля для проверки

1
<form id="myForm" action="" method="post">

Здесь следует обратить внимание на ID формы (в данном случае — formular). Именно на основе имени ID и осуществляется взаимодействие со скриптом проверки данных.

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

1
2
3
<input value="http://" class="validate[required,custom[url]] text-input" type="text" name="url" id="url" data-prompt-position="topLeft" />
<input value="" class="validate[required] text-input" type="text" name="req" id="req" data-prompt-position="bottomLeft" />
<input value="too many spaces obviously" class="validate[required,custom[onlyLetterNumber]]" type="text" name="special" id="special" data-prompt-position="bottomRight" />

Шаг 3. Подключаем скрипт для проверки данных формы на лету

1
2
3
4
5
<script>
$(document).ready(function(){
    $("#myForm").validationEngine();
   });
</script>

теория оптимальных валютных зон

Доступные параметры проверки данных формы на лету:

  • required: Проверка поля на введение символов (введено / не введено)
  • length[0,100] : Длина ограничивается от 0 до 100 символов
  • minCheckbox[7] : Максимально можно использовать 7 чекбоксов
  • confirm[fieldID] : Совпадают ли введенные данные с иным полем ( пригодится для подтверждения пароля)
  • telephone : Проверка телефонного номера
  • email : Проверка корректности адреса электронной почты
  • onlyNumber : В данном поле должны вводиться только цифры
  • noSpecialCaracters : В этом поле не должно быть спецсимволов
  • onlyLetter : В поле должны присутствовать только буквы.

Можно посмотреть демку работы плагина. Больше информации о плагине можно найти здесь.

Прокомментировать

Рубрики

Наши услуги

В прямом эфире