В данном уроке представлено создание контактной формы. Для проверки значения полей используется плагин jQuery, а результат наглядно отображается на форме.

Для формы используются файлы: index.html, init.js и default.css. Также нужно загрузить плагин jQuery для проверки значений полей формы.

В секцию head файла index.html добавляем код:

<link href="css/default.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/validate.min.js" type="text/javascript"></script>
<script src="js/init.js" type="text/javascript"></script>

Формируем разметку HTML:

<form id="form" class="blocks" action="#" method="post">
    <p>
        <label>Имя:</label>
        <input type="text" class="text" name="name" />
    </p>
    <p>
        <label>Компания:</label>
        <input type="text" class="text" name="company" />
    </p>
    <p>
        <label>Адрес e-mail:</label>
        <input type="text" class="text" name="email" />
    </p>
    <p>
        <label>Номер телефона:</label>
        <input type="text" class="text" name="phone" />
    </p>
    <p class="area">
        <label>Сообщение:</label>
        <textarea class="textarea" name="message"></textarea>
    </p>
    <p>
        <label>&nbsp;</label>
        <input type="submit" class="btn" value="Отправить" />
    </p>
</form>

Затем формируем внешний вид нашей формы с помощью CSS :

.blocks p {
margin-bottom:15px;
position:relative;
}
 
.btn {
display:block;
float:left;
height:31px;
line-height:31px;
padding:0 10px;
background:url(../gfx/bgbtn.jpg) repeat-x;
color:#565e62;
font-weight:bold;
font-size:11px;
border:1px solid #e1e0df;
outline:none;
}
 
.text,
.textarea {
padding:5px 10px;
height:27px;
border:1px solid #ddd;
color:#333;
background:url(../gfx/bginput.jpg) repeat-x bottom #fff;
position:relative;
z-index:2;
}
 
.text {
width:220px;
}
 
.textarea {
height:150px;
width:350px;
}
 
.blocks label {
float:left;
width:100px;
line-height:37px;
text-align:right;
margin-right:15px;
font-weight:bold;
color:#666;
}
 
.blocks label.error,
.blocks label.ok {
position:absolute;
z-index:1;
top:-4px;
left:110px;
padding:5px 15px 5px 280px;
/*Сбрасываем метку*/
width:auto;
text-align:left;
margin:0;
background-repeat:no-repeat;
background-position:257px 16px;
}
 
.blocks label.ok {
background-image:url(../gfx/icook.gif);
background-color:#deefca;
color:#577530;
}
 
.blocks label.error {
background-image:url(../gfx/icofail.gif);
background-color:#f5d6d7;
color:#c81925;
}
 
.area label.ok,
.area label.error {
height:163px;
padding-left:410px;
background-position:387px 16px;
}
 
/* CSS3 */
.btn,
.text,
.textarea,
.blocks label.error,
.blocks label.ok {
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
}

А теперь настало время для JavaScript кода, который возьмет на себя бремя проверок и формирования индикации ошибок в значениях полей нашей формы:

$(function(){
     
    $("#form").validate({   // используем id формы (можно использовать и имя класса)
        rules: {    // описываем правила проверки полей формы
            name: {         // указываем имя поля, для которого вводятся правила
                required: true, // в поле должно быть введено значение
                minlength: 3    // устанавливаем минимальную длину значения поля
            },
            company: {
                required: true
            },
            phone: {
                required: true,
                number: true,   // значение поля должно быть десятичным целым числом
                minlength: 6
            },
            email: {
                required: true,
                email: true // значение поля должно иметь правильный формат адреса email
            },
            message: {
                required: true
            }
        },
        messages: { // устанавливаем сообщения для пользователя
            name: {
                required: 'Данное поле должно быть заполнено!',
                minlength: 'Минимальная длина: 3'
            },
            company: {
                required: 'Данное поле должно быть заполнено!'
            },
            phone: {
                required: 'Данное поле должно быть заполнено!',
                number: 'Неправильный формат номера телефона',
                minlength: 'Минимальная длина: 6'
            },
            email: 'Неправильный формат адреса e-mail',
            message: {
                required: 'Данное поле должно быть заполнено!'
            }
        },
        success: function(label) {
            // Устанавливаем класс OK для сообщения об ошибке выключаем его через 2 секунды
            label.html('OK').removeClass('error').addClass('ok');
            setTimeout(function(){
                label.fadeOut(500);
            }, 2000)
        }
    });
     
});

Готово!

Добавлено: 17 Апреля 2018 13:59:11 Добавил: Андрей Ковальчук Нравится 0

Добавить