Лого www.SiteHere.ru

Проверка заполнения формы на сайте

Проверка заполнения формы на сайте

Абсолютно каждый владелец сайта использует на своём сайте как минимум одну форму. Это может быть форма обратной связи или форма комментирования, не так важно. При отправке формы, как правило, необходимо проверить данные, правильно ли они были введены. Например, правильно ли был введен email адрес. Обычно проверка происходит когда мы нажимаем на кнопку «Отправить», и затем следует перезагрузка страницы, после чего, если данные неверны, выводится сообщение об ошибке. НО! В этом уроке мы рассмотрим как сделать проверку формы на сайте без перезагрузки страницы.

Проверка заполнения формы

Для проверки формы мы будем использовать jQuery библиотеку — Validatr(скачать).

Как сделать проверку формы у себя на сайте?

HTML

Как выглядит работа данного плагина можно посмотреть ниже, а также скачать работающее демо:

Смотреть примерСкачать

Первым делом между тегами <head> подключим необходимые библиотеки(библиотеку jQuery и Validatr):

1
2
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>  
<script src="js/validatr.js" type="text/javascript"></script>

Затем вызовем функцию плагина с помощью кода:

1
2
3
4
5
<script>  
jQuery(function ($) {  
    $('form').validatr();   
});  
</script>

Данный код должен быть размещен также между тегами <head> </head>. То есть плагин сам распознает элемент формы на сайте.

Для правильной работы плагина Validatr, тег <input> должен быть заключен в тег <form>. И плагин будет обрабатывать различные условия, которые находятся в HTML5 атрибутах. Легче это понять на примере. Например, если вы хотите чтобы текстовое поле принимало только текстовые значения, то необходимо указать ему атрибут type="number", в таком же стиле задается минимальное и максимальное значение поля.

Возьмем к примеру следующую форму:

1
2
3
4
5
6
7
<form action="./">  
    <label for="number">Число</label>   
    <div>  
        <input type="number" id='number' step=2 min=1 max=11 name="number" required>  
        <input type="submit" value="Отправить">  
    </div>  
</form>

Атрибут step используется для определения шага. То есть вы нажимаете на стрелочку вверх:

Шаг счетчика

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

примеры сообщений

Вывод

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

Youtube
Видео-курс Евгения Попова о том как раскрутить свой канал на Youtube — ЗДЕСЬ.

Успехов!

С Уважением, Юрий Немец

Источник: http://www.hongkiat.com/blog/validate-form-inputs-validatr/

Рейтинг статьи

Понравилась статья - расскажи друзьям! :)

4 комментария к записи
  • Владимир

    Эм.. Это статья о валидации форм? Не хочу никого обидеть, но ссылка на документацию плагина была бы более информативна, нежели убогие 20 строк текста с не менее убогим примером валидации чисел…. Остальные статьи можно даже не смотреть

     
    • Юрий

      Владимир, вы думаете что каждый будет смотреть документацию плагина (ссылка в начале статьи) на английском языке? Намного легче взять что-то готовое и переделать под себя 🙂 .

       
  • Сергей

     
  • Дмитрий

    Спасибо за статью. Очень полезная.

     

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *