Валидация полей формы

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

Валидация полей формы с помощью HTML

Самый простой, но не самый эффективный способ - это валидация полей формы через стандартные свойства полей HTML.

Поле обязательно к заполнению

<input type="text" name="name" required>

Проверка ввода Email

<input name="email" required pattern="\S+@[a-z]+.[a-z]+">

Проверка ввода телефона

<input type="tel" name="phone" pattern="^((8|\+7)[\- ]?)?(\(?\d{3}\)?[\- ]?)?[\d\- ]{7,10}$" required />

Проверка по количеству символов

<input type="text" name="message" minlength="30" maxlength="2000" />

Проверка ввода только букв

<input type="text" name="message" pattern="[A-zА-яЁё]" />

Проверка ввода только цифр

<input type="text" name="message" pattern="[0-9]" />

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

Валидация полей формы с помощью JavaScript

Наиболее сложный способ валидации на чистом JavaScript на примере простой формы обратной связи:

<form action="" name="callback" onsubmit="return(validate());">
	<input type = "text" name="name" placeholder="Имя"/><br>
	<input type = "text" name="lastname" placeholder="Фамилия" /><br>
	<input type = "text" name="email" placeholder="E-mail"/><br>
	<select name="topic">
		<option value="-1" selected>[Выберите тему обращения]</option>
		<option value="1">Техническая поддержка</option>
		<option value="2">Реклама</option>
		<option value="3">Сообщить об ошибке</option>
	</select>
<input type="submit" value="Отправить" />
</form>      

Обращаем внимание на то, что в свойствах формы указан параметр onsubmit="return(validate());", что позволит выполнить функцию validate() перед отправкой формы. Теперь собственно сама функция проверки:

<script>
   <!--
      // Проверка заполненности полей формы.
      function validate() {
      
         if( document.callback.name.value == "" ) {
            alert( "Укажите имя" );
            document.callback.name.focus() ;
            return false;
         }
         if( document.callback.email.value == "" ) {
            alert( "Заполните Email" );
            document.callback.email.focus() ;
            return false;
         } 
           if( document.callback.lastname.value == "" ) {
            alert( "Укажите фамилию" );
            document.callback.lastname.focus() ;
            return false;
         }
         if( document.callback.topic.value == "-1" ) {
            alert( "Пожалуйста, выберите темы обращения" );
            return false;
         }
         return( true );
      }
   //-->
</script>

Проверка формата E-mail

function ValidMail() {
    var re = /^[\w-\.]+@[\w-]+\.[a-z]{2,4}$/i;
    var myMail = document.getElementById('email').value;
    var valid = re.test(myMail);
    if (valid) output = 'Адрес эл. почты введен правильно!';
    else output = 'Адрес электронной почты введен неправильно!';
    document.getElementById('message').innerHTML = output;
    return valid;
}

Проверка формата телефона

function ValidPhone() {
    var re = /^\d[\d\(\)\ -]{4,14}\d$/;
    var myPhone = document.getElementById('phone').value;
    var valid = re.test(myPhone);
    if (valid) output = 'Номер телефона введен правильно!';
    else output = 'Номер телефона введен неправильно!';
    document.getElementById('message').innerHTML = document.getElementById('message').innerHTML+'<br />'+output;
    return valid;
}  

Валидация полей формы с помощью плагина jQuery Validation Plugin

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

Этот плагин позволяет легко проверять формы на стороне клиента, и предлагает множество вариантов настроек. Для начала подключаем jQuery и jQuery Validation.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>

Затем простенькая форма для примера:

<form action="" name="callback" >
	<input type = "text" name="name" placeholder="Имя"/><br>
	<input type = "text" name="lastname" placeholder="Фамилия" /><br>
	<input type = "text" name="email" placeholder="E-mail"/><br>
	<select name="topic">
		<option value="-1" selected>[Выберите тему обращения]</option>
		<option value="1">Техническая поддержка</option>
		<option value="2">Реклама</option>
		<option value="3">Сообщить об ошибке</option>
	</select>
<input type="submit" value="Отправить" />
</form>      

Теперь давайте запустим проверку валидации при попытке отправить форму:

$('form[name="callback"]').validate({
  rules: {
    name: 'required',
    lastname: 'required',
    email: {
      required: true,
      email: true,
    },
    topic: 'required',
  },
  messages: {
    name: 'Укажите имя',
    lastname: 'Укажите фамилию',
    email: 'Укажите правильный E-mail',
    topic: 'Выберите тему обращения'
  },
  submitHandler: function(form) {
    form.submit();
  }
});

Как видно, после проверки формы на валидацию, происходит её отправка методом form.submit();