Валидация страницы регистрации с помощью jQuery гарантирует, что информация, предоставленная пользователем является корректной, что позволит пользователю легко пройти процесс регистрации.
Хотя HTML5 имеет возможности для проверки форм тем не менее пока имеет смысл использовать Javascript, который будет работать и в старых браузерах.
В сегодняшнем уроке, я покажу вам, как настроить клиентскую валидацию, которая будет работать в старых браузерах. Я также буду использовать Validator jQuery Plugin. Итак, начнем.
Ресурсы, необходимые для работы с этим руководством:
Во-первых, мы должны подключить наш CSS и JavaScript-код в теге head на нашей странице.
(0)
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Создаем страницу регистрации с валидацией с использованием jQuery</title>
<link href="css/style.css" media="screen" rel="stylesheet">
<link href="css/reset.css" media="screen" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,600italic,700italic,800italic,400,300,600,800' rel='stylesheet' type='text/css'>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/validator.js"></script>
<!--[if lt IE 9]>
<script src="dist/html5shiv.js"></script>
<![endif]-->
</head>
В нашем HTML-файле, мы собираемся обернуть все содержимое в div с классом container, затем настроить наше меню, которое является неупорядоченным списком, с классом tabs.
<div class="container">
<div class="flat-design-form">
<ul class="tabs">
<li><a class="active" href="#login" id="login-tab" name="login-tab"><span id="login_icon"></span> Login</a></li>
<li><a href="#register" id="register-tab" name="register-tab"><span id="signup_icon"></span> Register</a></li>
</ul>
</div>
</div>
Далее, мы создадим div с идентификатором login и классами form-display и show. Эти два класса будут использоваться кодом jQuery позже, чтобы скрыть и показать разделы регистрации и авторизации.
<div class="form-display show" id="login">
<h1>Login</h1>
<form action="" method="post" novalidate="">
<fieldset>
<ul>
<li>
<div class="item">
<input data-validate-length-range="6" name="name" placeholder="Username" required="required" type="text">
</div>
</li>
<li>
<div class="item">
<input data-validate-length-range="6" name="password" placeholder="Password" required='required' type="password">
</div>
</li>
<li><input class="button-login" type="submit" value="Login"></li>
</ul>
</fieldset>
</form>
</div>
Обратите внимание, что мы используем аттрибут data-validate-length-range="6". Он будет использоваться нашим validator jQuery plugin для ограничения длинны текста, вводимого в конкретное поле.
Теперь, когда мы закончили с вкладкой авторизации, давайте перейдем к вкладке регистрации. Для регистрации, мы создадим блок с ID="register" и классами form-display и hide. По умолчанию, этот раздел будет скрыт. Каждое поле мы обернем в div с классом item.
<div class="form-display hide" id="register">
<h1>Register</h1>
<form action="" method="post" novalidate="">
<fieldset>
<ul>
<li>
<div class="item">
<input data-validate-length-range="6" name="name" placeholder="Username" required="required" type="text">
</div>
</li>
<li>
<div class="item">
<input data-validate-length="6,8" name="password" placeholder="Password" required='required' type="text">
</div>
</li>
<li>
<div class="item">
<input class='email' name="email" placeholder="Email" required="required" type="email">
</div>
</li>
<li>
<div class="item">
<label><input name="url" placeholder="Website link" required="required" type="url"></label>
</div>
</li>
<li><input class="button-register" id='send' type="submit" value="Sign Up"></li>
</ul>
</fieldset>
</form>
</div>
На данный момент, у вас форма должна выглядеть как на изображении ниже.
login
Теперь давайте начнем добавлять общие стили. Вначале определим стили для body и класса container.
body {
background: url('../img/low_contrast_linen_2X.png');
color: fff;
font-family: 'Open Sans';
}
.container {
width: 960px;
margin: 0 auto;
}
Затем для наших вкладок меню.
.flat-design-form {
background: #f58020;
margin: 130px auto;
width: 400px;
height: auto;
position: relative;
font-family: 'Open Sans';
-webkit-box-shadow: 1px 1px 2px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 1px 1px 2px 0px rgba(50, 50, 50, 0.75);
box-shadow: 1px 1px 2px 0px rgba(50, 50, 50, 0.75);
}
#login {
padding-bottom: 20px;
}
#register {
background: #0DA1FF;
padding-bottom: 20px;
}
#login-tab {
background: #f58020;
}
#register-tab {
background: #0DA1FF;
}
span#login_icon {
width: 16px;
height: 16px;
left: 8px;
position: absolute;
background: url(../img/login.png)no-repeat;
display: block;
}
span#signup_icon {
width: 16px;
height: 16px;
left: 110px;
position: absolute;
background: url(../img/sign-in.png)no-repeat;
display: block;
}
.tabs {
height: 40px;
margin: 0;
padding: 0;
list-style-type: none;
width: 100%;
position: relative;
display: block;
margin-bottom: 6px;
}
.tabs li {
display: block;
float: left;
margin: 0;
padding: 0;
list-style: none;
}
.tabs a {
display: block;
float: left;
text-decoration: none;
color: white;
font-size: 16px;
padding: 15px 30px 15px 30px;
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
Далее, давайте определим стили для наших форм. Они будут включать в себя поля различных типов.
.form-display {
padding: 0 20px;
position: relative;
}
.form-display h1 {
font-size: 30px;
padding: 10px 0 20px 0;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
form {
padding-right: 20px !important;
}
form input[type=text],
form input[type=password],
form input[type=email],
form input[type=url]{
width: 100%;
outline: none;
height: 40px;
margin-bottom: 10px;
padding-left: 15px;
background: #fff;
border: none;
color: #545454;
font-family: 'Open Sans';
font-size: 13px;
}
.show {
display: block;
}
.hide {
display: none;
}
Для наших кнопок мы зададим границу снизу с цветом #1B78B2, чтобы создать красивую плоскую кнопку. Затем установим стили при наведении и активном состоянии.
.button-login {
display: block;
background: #0DA1FF;
padding: 10px 30px;
font-size: 14px;
text-align: center;
border-radius: 5px;
font-family: 'Open Sans';
color: white;
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
border: 0;
border-bottom: 2px solid #1B78B2;
cursor: pointer;
-webkit-box-shadow: inset 0 -2px #1B78B2;
box-shadow: inset 0 -2px #1B78B2;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
transition: all 0.6s ease;
}
.button-login:hover {
background: #1B78B2;
}
.button-register {
display: block;
background: #f58020;
padding: 10px 30px;
font-size: 14px;
text-align: center;
border-radius: 5px;
font-family: 'Open Sans';
color: white;
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
border: 0;
border-bottom: 2px solid #c36518;
cursor: pointer;
-webkit-box-shadow: inset 0 -2px #c36518;
box-shadow: inset 0 -2px #c36518;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
transition: all 0.6s ease;
}
.button-register:hover {
background: #fb7100;
}
.button-register:active {
background: #136899;
}
Следующий шаг, определение стилей для наших заполнителей (placeholder). Мы будем использовать вендорные префиксы для каждого браузера.
::-webkit-input-placeholder {
font-size: 13px;
font-family: 'Open Sans';
color: #545454;
}
:-moz-placeholder {
/* Firefox 18- */
font-size: 13px;
font-family: 'Open Sans';
color: #545454;
}
::-moz-placeholder {
/* Firefox 19+ */
font-size: 13px;
font-family: 'Open Sans';
color: #545454;
}
:-ms-input-placeholder {
font-size: 13px;
font-family: 'Open Sans';
color: #545454;
}
Наконец, чтобы сделать нашу валидацию более живой, мы добавим стили для ошибок проверки с применением CSS3-анимации. Обратите внимание, что мы используем свойство CSS3 transition, чтобы сделать плавный эффект при показе сообщения об ошибках.
.item {
position: relative;
}
.item .alert {
float: left;
margin: 0 0 0 20px;
padding: 3px 10px;
color: #FFF;
border-radius: 3px 4px 4px 3px;
background-color: #ef3030;
max-width: 170px;
white-space: pre;
position: absolute;
left: -15px;
opacity: 0;
z-index: 1;
transition: .15s ease-out;
}
.item .alert::after {
content: '';
display: block;
height: 0;
width: 0;
border-color: transparent #ef3030 transparent transparent;
border-style: solid;
border-width: 11px 7px;
position: absolute;
top: 5px;
left: -10px;
}
.item.bad .alert {
left: 0;
opacity: 1;
top: 5px;
left: 343px;
font-size: 12px;
padding: 10px;
}
Для наших вкладок меню, мы собираемся использовать указанный ниже jQuery-код. Он будет скрывать и показывать вкладки авторизации и регистрация используя классы show и hide.
(function($) {
// constants
var SHOW_CLASS = 'show',
HIDE_CLASS = 'hide',
ACTIVE_CLASS = 'active';
$('.tabs').on('click', 'li a', function(e) {
e.preventDefault();
var $tab = $(this),
href = $tab.attr('href');
$('.active').removeClass(ACTIVE_CLASS);
$tab.addClass(ACTIVE_CLASS);
$('.show').removeClass(SHOW_CLASS).addClass(HIDE_CLASS).hide();
$(href).removeClass(HIDE_CLASS).addClass(SHOW_CLASS).hide().fadeIn(620);
});
})(jQuery);
Далее, добавим код, чтобы включить функциональные возможности нашего validator jQuery plugin.
// initialize the validator function
validator.message['date'] = 'not a real date';
// validate a field on "blur" event, a 'select' on 'change' event & a '.reuired' classed multifield on 'keyup':
$('form').on('blur', 'input[required], input.optional, select.required', validator.checkField).on('change', 'select.required', validator.checkField).on('keypress', 'input[required][pattern]', validator.keypress);
$('.multi.required').on('keyup blur', 'input', function() {
validator.checkField.apply($(this).siblings().last()[0]);
});
// bind the validation to the form submit event
//$('#send').click('submit');//.prop('disabled', true);
$('form').submit(function(e) {
e.preventDefault();
var submit = true;
// evaluate the form using generic validaing
if (!validator.checkAll($(this))) {
submit = false;
}
if (submit) this.submit();
return false;
});
Вот и все! В этом уроке, мы создали веб-страницу с применением анимации CSS3 и валидации форм с помощью validator jQuery plugin.
Надеюсь, вам понравился этот урок и он будет вам полезен!
Источник© 2008 - 2024 Все права защищены
Новый комментарий