- Валидация полей формы с помощью HTML
- Поле обязательно к заполнению
- Проверка ввода Email
- Проверка ввода телефона
- Проверка по количеству символов
- Проверка ввода только букв
- Проверка ввода только цифр
- Валидация полей формы с помощью JavaScript
- Проверка формата E-mail
- Проверка формата телефона
- Валидация полей формы с помощью плагина jQuery Validation Plugin
В данной статье я постараюсь рассказать о различных способах валидации форм и приведу конкретные примеры, которые без проблем можно будет адаптировать под свои задачи.
Валидация полей формы с помощью 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();