Валидация формы jQuery
При создании каких-либо форм на Вашем сайте, нужно организовывать различные проверки полей формы. Можно найти много способов реализации механизма проверки, на некоторых я учился сам, некоторые мне не нравились загруженностью кода, но в итоге у меня появился свой алгоритм, которого я придерживаюсь.
Для примера разберем валидацию формы регистрации. Основные шаги:
- Пишем html-код
- Добавляем css
- Пишем валидацию:
- имя
- пароль
html-код формы регистрации
<div class="form__wrapper"> <form id="register" action="#"> <h1>Регистрация</h1> <div class="fields"> <label for="login">Ваш логин:</label> <input type="text" id="login" value="" placeholder="AmateR"> <span class="dot">*</span> </div> <div class="fields"> <label for="email">Ваш e-mail:</label> <input type="text" id="email" value="" placeholder="youmail@domain.ru"> <span class="dot">*</span> </div> <div class="fields"> <label for="pass1">Пароль:</label> <input type="password" id="pass1" value="" > <span class="dot">*</span> </div> <div class="fields"> <label for="pass2">Пароль еще раз:</label> <input type="password" id="pass2" value="" > <span class="dot">*</span> </div> <button type="submit" name="button" id="send">Отправить</button> </form> </div>
Форма классическая – логин, e-mail, пароль и подтверждение пароля. Для первых полей добавим placeholder и стилизуем его.
Css для формы регистрации
/** * Стилизуем placeholder */ ::-webkit-input-placeholder {color: #aaaaaa;} ::-moz-placeholder {color: #aaaaaa;} /* Firefox 19+ */ :-moz-placeholder {color: #aaaaaa;} /* Firefox 18- */ :-ms-input-placeholder {color: #aaaaaa;} input::-webkit-input-placeholder {opacity: 1; transition: opacity 0.3s ease;} input::-moz-placeholder {opacity: 1; transition: opacity 0.3s ease;} input:-moz-placeholder {opacity: 1; transition: opacity 0.3s ease;} input:-ms-input-placeholder {opacity: 1; transition: opacity 0.3s ease;} input:focus::-webkit-input-placeholder {opacity: 0; transition: opacity 0.3s ease;} input:focus::-moz-placeholder {opacity: 0; transition: opacity 0.3s ease;} input:focus:-moz-placeholder {opacity: 0; transition: opacity 0.3s ease;} input:focus:-ms-input-placeholder {opacity: 0; transition: opacity 0.3s ease;} /** * Основные стили */ body { background: url('https://codernote.ru/files/image/fon-1.png'); font: 14px/20px 'Open Sans', serif; } h1, h2, h3 { text-align: center; letter-spacing: -0.6px; } .form__wrapper { width: 40%; margin: 20px auto; } form#register { position: relative; background: #FFF; padding: 10px; border: 1px solid #a7a7a7; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius: 4px; box-shadow: 1px 3px 10px 0px rgba(0, 0, 0, 0.10); } form#register div.fields { position: relative; line-height: 30px; margin-bottom: 15px; } form#register input[type="text"], form#register input[type="password"] { width: 95%; outline: none; padding: 5px; border: 1px solid #a7a7a7; } form#register input[type="text"]:focus, form#register input[type="password"]:focus { border: 1px solid #2A900C; } form#register input[type="text"].error, form#register input[type="password"].error { border: 1px solid red; } form#register span.dot { position: absolute; color: red; line-height: 15px; right: 0; } form#register span.text-error { position: absolute; top: 0; left: 0; color: red; font-size: 10px; line-height: 10px; } form#register button { position: relative; margin-top: 15px; right: 0; text-decoration:none; text-align:center; padding:11px 32px; border:solid 1px #004F72; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius: 4px; font-size: 14px; font-weight:bold; color:#E5FFFF; background-color:#3BA4C7; background-image: -moz-linear-gradient(top, #3BA4C7 0%, #1982A5 100%); background-image: -webkit-linear-gradient(top, #3BA4C7 0%, #1982A5 100%); background-image: -o-linear-gradient(top, #3BA4C7 0%, #1982A5 100%); background-image: -ms-linear-gradient(top, #3BA4C7 0% ,#1982A5 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1982A5', endColorstr='#1982A5',GradientType=0 ); background-image: linear-gradient(top, #3BA4C7 0% ,#1982A5 100%); -webkit-box-shadow:0px 0px 2px #bababa, inset 0px 0px 1px #ffffff; -moz-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff; box-shadow:0px 0px 2px #bababa, inset 0px 0px 1px #ffffff; }
Валидация формы регистрации
Сразу приведу полный код валидации, а потом разберем его
jQuery(function($) { $('#register').on('submit', function(event) { if ( validateForm() ) { // если есть ошибки возвращает true event.preventDefault(); } }); function validateForm() { $(".text-error").remove(); // Проверка логина var el_l = $("#login"); if ( el_l.val().length < 4 ) { var v_login = true; el_l.after('<span class="text-error for-login">Логин должен быть больше 3 символов</span>'); $(".for-login").css({top: el_l.position().top + el_l.outerHeight() + 2}); } $("#login").toggleClass('error', v_login ); // Проверка e-mail var reg = /^\w+([\.-]?\w+)*@(((([a-z0-9]{2,})|([a-z0-9][-][a-z0-9]+))[\.][a-z0-9])|([a-z0-9]+[-]?))+[a-z0-9]+\.([a-z]{2}|(com|net|org|edu|int|mil|gov|arpa|biz|aero|name|coop|info|pro|museum))$/i; var el_e = $("#email"); var v_email = el_e.val()?false:true; if ( v_email ) { el_e.after('<span class="text-error for-email">Поле e-mail обязательно к заполнению</span>'); $(".for-email").css({top: el_e.position().top + el_e.outerHeight() + 2}); } else if ( !reg.test( el_e.val() ) ) { v_email = true; el_e.after('<span class="text-error for-email">Вы указали недопустимый e-mail</span>'); $(".for-email").css({top: el_e.position().top + el_e.outerHeight() + 2}); } $("#email").toggleClass('error', v_email ); // Проверка паролей var el_p1 = $("#pass1"); var el_p2 = $("#pass2"); var v_pass1 = el_p1.val()?false:true; var v_pass2 = el_p1.val()?false:true; if ( el_p1.val() != el_p2.val() ) { var v_pass1 = true; var v_pass2 = true; el_p1.after('<span class="text-error for-pass1">Пароли не совпадают!</span>'); $(".for-pass1").css({top: el_p1.position().top + el_p1.outerHeight() + 2}); } else if ( el_p1.val().length < 6 ) { var v_pass1 = true; var v_pass2 = true; el_p1.after('<span class="text-error for-pass1">Пароль должен быть не менее 6 символов</span>'); $(".for-pass1").css({top: el_p1.position().top + el_p1.outerHeight() + 2}); } $("#pass1").toggleClass('error', v_pass1 ); $("#pass2").toggleClass('error', v_pass2 ); return ( v_login || v_email || v_pass1 || v_pass2 ); } });
Данный код будет корректно работать при обычной отправке формы. Для проверки формы, которая будет отправляться через ajax код скрипта (не валидация, а обработчик нажатия кнопки) будет немного отличаться:
jQuery(function($) { $('#register').on('submit', function(event) { event.preventDefault(); // отменяем событие по умолчанию if ( validateForm() ) { // если есть ошибки возвращает true return false; // прерываем выполнение скрипта } // тут ajax запрос }); // тут функция валидации без изменений }
- Для логина зададим ограничение – минимальное количество символов в логине 4. Если условие не соблюдается, то под полем ввода логина выводим соответствующее сообщение, а самому полю присваиваем класс error.
- Для поля e-mail сначала проверяем на заполненность и, если в нем что то есть, делаем проверку на соответствие маске. Информация о ошибке выводится аналогично полю ввода логина.
- Для полей пароль и подтверждение пароля сначала проверяем на заполненность, и если в них что то есть, делаем проверку на равенство паролей. Информация о ошибке выводится аналогично полю ввода логина.
Отличная инструкция. Перебрал множество, эта лучшая!
Только не пойму в каком месте передать информацию в обработчик, если все поля заполнены?
Евгений, если вы хотите отправлять данные ajax-ом, то тогда скрипт отправки можно писать сразу после:
if ( validateForm() ) {
event.preventDefault();
}
тут в случае ошибки validateForm() возвращает true, и выполнение прерывается, код следующий за этим условием выполняться не будет, а если все заполнено корректно, то продолжится выполнение кода.
А если у вас выполняется отправка формы с перезагрузкой страницы, то достаточно у формы указать метод отправки (post или get) и action (если надо указать путь к обработчику)
Алексей, спасибо за ответ.
Но почему то не работает ajax методом.
Вставляю свой код:
else {
var form = $(formis);
$.ajax({
type: “POST”,
url: “mail.php”,
data: form.serialize()
}).done(function() {
form.find(“.success”).addClass(“active”);
setTimeout(function() {
form.find(“.success”).removeClass(“active”);
form.trigger(“reset”);
}, 2000);
});
}
То идет отправка POST методом и все передается в строку браузера.
А если использовать без else, тогда данные сразу же отправляются, даже если не заполнены поля
Прошу прощения, моя ошибка. Совсем забыл, что приведенный мной код будет работать только с обычной отправкой формы. В случае же, когда отправляем с помощью ajax, необходимо немного изменить логику – событие отправки формы по умолчанию отключаем сразу, а вот если есть ошибки при заполнении возвращаем false:
Подправил текст статьи. Спасибо за ваше замечание.
Сейчас все заработало.
Но, firefox пропускает.
Ему нужен “event handler”
$(‘#register’).on(‘submit’, function(event) {
event.preventDefault(event);
Привет Алексей!
Скажи, а если, в случае передачи через аякс, я добавлю радио кнопки в форму, они передадутся?
А если добавлю селект?
А валидация происходит реактивно? или после заполнения всего и нажатия на кнопку сабмит?
Спасибо!
Все передастся. В данном примере валидация настроена на нажатие кнопки сабмит, но в принципе возможна любая реализация.
Спасибо!
Не хватает v_login = false.
В текущем варианте при повторных нажатиях кнопки для корректно заполненного поля “login” каждый раз отрабатывает toggleClass(‘error’, v_login ).
Оно то становится красненьким, то нет.