Блог разработчиков

Проверка формы отправки сообщения на jQuery без php

17 октября 2014

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

<form action="send.php" method="post">
<label for="name">Ваше имя</label><input type="text" name="name" id="name" />
<label for="phone">Ваш телефон</label><input type="text" name="phone" id="phone" />
<label for="email">Ваш email</label><input type="text" name="email" id="email" />
<label for="text">Текст вашего сообщения</label><textarea id="text" name="text"></textarea>
<p><button type="submit" name="submit">Отправить сообщение</button></p>
</form>

Приметивная форма обратной связи с 4 полями: имя, телефон, email, текст сообщения. Сделать валидацию или проверку на заполнение полей можно несколькими вариантами, самый простой из них это подстановка суффикс-классов к обязательным для заполнения полям. К примеру, обязательными полями будут: имя, телефон, email. Для этих полей в первую очередь необходимо подставить суффикс-класс valid, например

<form action="send.php" method="post">
<label for="name">Ваше имя</label><input type="text" name="name" class="valid" id="name" />
<label for="phone">Ваш телефон</label><input type="text" name="phone" class="valid" id="phone" />
<label for="email">Ваш email</label><input type="text" name="email" class="valid" id="email" />
<label for="text">Текст вашего сообщения</label><textarea id="text" name="text"></textarea>
<p><button type="submit" name="submit">Отправить сообщение</button></p>
</form>

Суффикс-классом обозначены обязательные поля. Скелет готов и можно приступить к реализации проверки на jQuery.

jQuery(function(){
   jQuery("form").submit(function(e){
      var error = 0;
      jQuery(".valid", this).each(function(){
         if(jQuery(this).val().length > 0) {
            jQuery(this).removeClass("error");
         } else {
            jQuery(this).addClass("error");
            error++;
         }
      })
      if(error > 0) {
         e.preventDefault();
      }
   })
})

Данный скрипт позволяет заблокировать форму отправки формы по нажатию на кнопку отправки в случае если количество незаполненных полей превысило 0. Помимо блокировки скрипт добавляет еще один суффикс-класс после проверки заполнения полей, в случае если оно не заполнено error. Это необходимо для того чтобы оформить незаполненные поля, выделить их, например так

.error {
border: 1px solid red;
background: red;
}