Валидация или проверка полей формы на ошибки и заполнение
Віталий
Доброго времени суток. 🙂
В этой статье хочу рассказать вам о том, как сделать проверку полей формы на заполнение. В итоге у нас получится валидация формы с помощью jQuery. Многие делают на чистом PHP в самом обработчике, но иногда такой метод не подходит. Например, в случаи, когда вы захотите проверять форму до перезагрузки страницы. Вдруг вам не нужно обновления страницы и вы хотите вывести сообщение об ошибке, чтобы человек исправил, а уже потом произошла отправка и обновление страницы. Конечно можно еще использовать метод с AJAX, но это уже совсем другая история 🙂
Пример того что у нас получится можно посмотреть в примере ниже. В примере задействована и валидация на правильный ввод почты - e-mail. Ниже я покажу два варианта скриптов с проверкой правильности почты и без нее.
Как видите, пока все поля не будут заполнены, скрипт не даст отправить форму, к тому же в поле для e-mail должен быть введен корректный адрес. Для начала я покажу как сделать простую проверку на заполненность полей без проверки e-mail. Вдруг в вашей форме нет этого поля и вам нужно проверить просто текстовое поле, чтобы оно не было пустое и на почту не приходили пустые уведомления.
Для осуществления задуманного, нам нужно для начала создать саму форму. У Вас она уже может быть, если вы захотите данный материал внедрить в нее, нужно будет его адаптировать под вашу форму. Я же покажу все на своем примере. Моя форма ничего не будет отправлять, в этой статье нет обработчика для отправки писем, чтобы не усложнять материал. Обработчик отправки писем, это другая история. Для начала сам HTML код формы.
По коду видно, что наша форма состоит из трех полей - имя, почта и тестовое поле. Есть еще несколько важных моментов, которые понадобятся в любом случаи для правильной работы скрипта. Давайте разберем по-порядку.
id="file_form" - айди для нашей формы. ID - обязателен, он будет тоже использоваться в скрипте.
<div id="messenger"></div> - обязательный блок. Это контейнер для вывода сообщений об ошибке от скрипта. данный блок можно разместить и вне формы. Задать ему любые стили. В примере, это тот красный текст, что сообщает об незаполненном поле.
onclick="frmotpr();" - событие, которое будет запускать функцию из нашего скрипта, при нажатии на кнопку. Данное событие добавлено к кнопке ОТПРАВИТЬ. Предпоследняя строка в коде.
Всем полям тоже присвоены ID и классы. Они тоже понадобятся для нашего скрипта валидации. ID для поля с e-mail особенно важен для нашего будущего скрипта, что будет проверять правильность введенного e-mail.
Теперь, чтобы придать нормальный внешний вид нашей форме, добавим немного CSS стилей.Если вы будете использовать их на своем сайте, то добавьте их в свой файл стилей.
Данный стили задают параметры для самой формы, полей, кнопки. Расписывать все строчки, каждая для чего - не буду, для этого есть учебники по CSS. Распишу лишь два самых основных.
#messenger - это стили для того самого блока с выводом сообщений. Главный параметр для этого класса - это display:none. Тоесть мы изначально скрываем блок.
.notvalid - это стили для класса, который будет присваиваться нашим скриптом к тому полю, что не заполнено или заполнено не корректно. Об этом классе я еще раз упомяну ниже.
Теперь, когда у нас есть готовая форма или вы свою форму настроили соответственно моим указаниям, добавили ей айди, мои или свои, нужный блок и событие кнопки, можем приступить к подключению скрипта.
Так как наш скрипт работает с помощью jQuery, нужно чтобы была подключена библиотека jQuery. Если она не подключена ранее, сделайте это, добавив вот такую строку:
После библиотеки, не перед ней, а именно после нужно уже подключать, наш долгожданный скрипт валидации формы. как и писал ранее, первым вариантом будет сначала скрипт проверки поле на заполнение, без проверки правильности введенной почты. Сам скрипт имеет следующий вид:
<script>
$(function frmotpr(){
var field = new Array("name_f", "contact_f", "mssg_f");
$("#file_form").submit(function() {
var error=0;
$("#file_form").find(":input").each(function() {
for(var i=0;i<field.length;i++){
if($(this).attr("name")==field[i]){
if(!$(this).val()){
$(this).addClass('notvalid');
error=1;
}
else{
$(this).removeClass('notvalid');
}
}
}
})
if(error==0){
return true;
}else{ var err_text = "";
if(error==1) err_text="Не все обязательные поля заполнены!";
$("#messenger").html(err_text);
$("#messenger").fadeIn("slow");
return false;
}
})
});
</script>
Давайте рассмотрим основные элементы нашей функции из скрипта.
frmotpr() - вторая строка, название функции. Это название должно совпадать с называнием внутри нашего события onclick, что мы добавили кнопке ОТПРАВИТЬ.
("name_f", "contact_f", "mssg_f") - в третей строке в кавычках, через запятую мы указываем ID наших полей ввода, что обязательны к заполнению. Я ввел все три. Вы можете ограничится одним или двумя или десятком, если у вас будет много полей.
$("#file_form").submit - в четвертой строке указываем ID нашей формы и то что функция будет срабатывать когда мы нажмем на кнопку submit этой самой формы.
error=0; - код ошибки, а вернее ее отсутствие.
$("#file_form").find(":input") - проверяем все поля ввода input нашей формы на заполнение.
Далее идет проверка на заполненность в результате чего срабатывает условие для вывода сообщения об ошибке.
$(this).addClass("notvalid"); - в итоге, если поле не заполнено то ему присваивается класс - notvalid. Для которого мы присвоили в стилях определенные параметры, а точнее неправильно заполненное поле, будет становиться красным.
$(this).removeClass("notvalid"); - если поле правильно заполнено - удаляем класс notvalid.
if(error==0){ - далее мы проверяем что у нас вышло в итоге. и если код ошибки 0 - то есть ошибки отсутствуют, мы переходим к следующему пункту:
return true; - разрешаем сработать нашей форме и отправить данные. Например через action. Так же в это место вы можете добавлять AJAX функцию для отправки письма или ще что-то что нужно выполнить если фсе поля заполнены. тут ограничивается вашей фантазией.
}else{ var err_text = ""; -далее условие, что в противном случаи, если есть ошибки, мы создаем переменную err_text и задаем ей пока что пустое значение.
if(error==1) err_text="Не все обязательные поля заполнены!"; - Если код ошибки 1, то есть одно или несколько полей не заполнены, мы присваиваем переменной err_text - текст Не все обязательные поля заполнены!.
$("#messenger").html(err_text); - наш текст ошибки вставляем в тот самый блок для ошибок - messenger.
("#messenger").fadeIn("slow"); - далее показываем с легкой анимацией наш блок, который мы стилями выше скрыли. Если было пустое поле вы увидите после нажатия на кнопку сообщение об ошибке.
return false; - запрещаем отправку формы и возвращаемся к началу. перед этой строкой можете тоже добавить какие-то задачи или функции, которые хотите.
Вот и весь скрипт по сути. Если вы немного разбираетесь в JS, то все понятно и доступно. Если Вы правильно его адаптировали под свою форму и свои поля со стилями, то результат не должен заставить себя ждать и валидация начнет работать.
Теперь давайте рассмотрим версию скрипта, которая помимо проверки на заполнение, будет еще и проверять корректно ли введен e-mail.
Сам скрипт очень похож, добавлена просто еще функция и пару новых строк:
<script>
$(function frmotpr(){
var field = new Array("name_f", "contact_f", "mssg_f");
$("#file_form").submit(function() {
var error=0;
$("#file_form").find(":input").each(function() {
for(var i=0;i<field.length;i++){
if($(this).attr("name")==field[i]){
if(!$(this).val()){
$(this).addClass('notvalid');
error=1;
}
else{
$(this).removeClass('notvalid');
}
}
}
})
var email = $("#contact_f").val();
if(!isValidEmailAddress(email)){
error=2;
$("#contact_f").addClass('notvalid');
}
if(error==0){
return true;
}else{
var err_text = "";
if(error==1) err_text="Не все обязательные поля заполнены!";
if(error==2) err_text="Введен не корректный e-mail!";
$("#messenger").html(err_text);
$("#messenger").fadeIn("slow");
return false;
}
})
});
function isValidEmailAddress(emailAddress) {
var pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
return pattern.test(emailAddress);
}
</script>
Собственно, рассмотрим новые строки
function isValidEmailAddress(emailAddress) - последние 4 строки скрипта это функция валидации для e-mail. Особо разбирать там нечего она нужна для проверки и участвует в условиях из основной функции. Я ее упоминаю в самом начале, дабы потом ссылаясь на нее было понятно.
var email = $("#contact_f").val(); - эти строки выше. Создаем переменную email и указываем айди нашего поля для почты - contact_f.
if(!isValidEmailAddress(email)){ - создаем условие, что если наша функция по проверке выявила ошибку, присваиваем ошибке новый код.
error=2; - присваиваем ошибке код 2.
$("#contact_f").addClass("notvalid"); - полю e-mail присваиваем наш класс ошибки notvalid.
if(error==2) err_text="Введен не корректный e-mail!"; - эта строка добавилась в то место, где мы присваиваем переменной err_text - текст. Данная строка указывает, что если код ошибки 2, то есть некорректный e-mail, выведется текст - Введен не корректный e-mail!
Все остальное же, осталось без изменений. Сравните скрипты и разберетесь где и что отличается. Я постарался подробно расписать, думаю проблем не должно возникнуть. Мой пример из начала статьи как раз основан уже на втором скрипте.
Как и писал ранее, адаптируйте скрипт под свою форму, указывайте правильно айди формы и полей, не забудьте про событие у кнопки отправления формы, блок дла вывода сообщения и стили для этого блока и поля с ошибкой. Если постараетесь у вас все получится. Многовато текста получилось, так что будем заканчивать.
