Валидация формы средствами JQuery
Автор: admin Дата: 2022-02-10 12:57:41
В программировании нередко требуется валидация форм и проверка содержимого полей на корректность. Некоторые разработчики используют нотисы и оповещения об ошибке при неверном вводе данных в форму, другие же используют обрамления полей, которые были пусты или наполнены некорректными данными. В результате создания механизма валидации формируется вполне осмысленный программный код (скрипт) по проверке вводимых данных.
Итак, допустим, что у нас есть форма с двумя полями, такими, как "Фио пользователя" и "Email". Используя эту форму мы будем передавать данные на последующую обработку на стороне сервера. Обработка валидации формы формируется на стороне клиента через скрипт.
Часть HTML-кода выглядит следующим образом:
<style>.err {border: solid 2px red;;}</style><form id="form_goodpay" name="form_goodpay" class="form_style" action="" method="POST"><label for="name_client">ФИО клиента *:</label><br><input type="text" id="name_client" name="name_client" value=""/><br><label for="tel">Телефон клиента:</label><br><input type="text" id="tel" name="tel" value=""/><br><label for="email">Email клиента *:</label><br><input type="text" id="email" name="email" value=""/><br><input type="hidden" id="key_hidden" name="key_hidden" value="key12345"/><br><input type="submit" id="submit1" name="submit1" value="Послать сообщение"/><br></form>
Скрипт обработки вводимых данных выглядит следующим образом:
$(document).ready(function() {$("#form_goodpay").submit(function () {var Fio = $("#name_client");var Email = $('#email');var ReturnForm = true;if (Fio.val().length < 4) {console.log('Add class Err Fio');Fio.addClass('err');ReturnForm = false;} else {console.log('Delete class Err Fio');if (Fio.hasClass('err')) Fio.removeClass('err');}var reg = /^([a-z0-9_\.-])+@[a-z0-9-]+\.([a-z]{2,4}\.)?[a-z]{2,4}$/i;if (reg.test(Email.val())) {console.log('Email correct!');if (Email.hasClass('err')) Email.removeClass('err');} else {console.log('Email uncorrect!');Email.addClass('err');ReturnForm = false;}return ReturnForm; // //валидация submit});});
$(document).ready(function() {
$("#form_goodpay").submit(function () {
var Fio = $("#name_client");
var Email = $('#email');
var Text = $('#text');
var ReturnForm = true;
console.log('------ Click button sumbit! -------');
if (Fio.val().length < 4) {
console.log('Add class Err Fio');
Fio.addClass('err');
ReturnForm = false;
} else {
console.log('Delete class Err Fio');
if (Fio.hasClass('err')) Fio.removeClass('err');
}
console.log('----------------------------------');
console.log('----------------------------------');
console.log('----------------------------------');
var reg = /^([a-z0-9_\.-])+@[a-z0-9-]+\.([a-z]{2,4}\.)?[a-z]{2,4}$/i;
if (reg.test(Email.val())) {
console.log('Email correct!');
if (Email.hasClass('err')) Email.removeClass('err');
} else {
console.log('Email uncorrect!');
Email.addClass('err');
ReturnForm = false;
}
if (Text.val().length < 1) {
console.log('Add class Err Text');
Text.addClass('err');
ReturnForm = false;
} else {
console.log('Delete class Err Text');
if (Text.hasClass('err')) Text.removeClass('err');
}
return ReturnForm; // //валидация submit
});
});
Он подсвечивает ошибочные поля красным цветом. Это достигается за счет добавления класса .err к инпут-полям. Функция в случае возврата true передает данные на сервер, где они успешно дальше обрабатыватся. В случае возврата false обводятся красным ошибочные поля и отправка формы методом submit прерывается.
Если вы считаете текст данного блога оскорбительным или некорректным, напишите об этом по адресу IntegralAL@mail.ru
с URL-адресом блога. В теме письма пишите <Жалоба>, либо <Неккоректно>.