Новые уроки
Получай новые уроки по RSS

Подписка на рассылку


Голосование
Чего выкладывать больше?
Программ
Уроков
Скриптов
Шаблонов
Макетов
CMS
Видеоуроков
Облако тегов

Jquery → Оригинальная проверка заполнения формы

Оригинальная проверка заполнения формы


Демо: смотреть
Скачать: awesomeform.zip [35,76 Kb] (cкачиваний: 786)


В этом уроке мы собираемся построить удивительный вид формы контактной формы. Кроме того, мы собираемся для отображения ошибок использовать известный JQuery плагин для проверки полей формы.

Оригинальная проверка заполнения формы


Нам необходимо создать файлы: index.html, init.js и default.css. Следующим шагом является загрузка JQuery плагина проверки от http://bassistance.de/jquery-plugins/jquery-plugin-validation/

Включить все файлы в головной части в 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 разметка:

index.html
<form id="form" class="blocks" action="#" method="post">
    <p>
        <label>Name:</label>
        <input type="text" class="text" name="name" />
    </p>
    <p>
        <label>Company:</label>
        <input type="text" class="text" name="company" />
    </p>
    <p>
        <label>Your e-mail:</label>
        <input type="text" class="text" name="email" />
    </p>
    <p>
        <label>Contact number:</label>
        <input type="text" class="text" name="phone" />
    </p>
    <p class="area">
        <label>Message:</label>
        <textarea class="textarea" name="message"></textarea>
    </p>
    <p>
        <label> </label>
        <input type="submit" class="btn" value="Submit" />
    </p>
</form>


Легко? Обратите внимание, что я передал ID в форму. Это действительно важно, поскольку мы собираемся использовать его позже. Идем к следующему шагу.

default.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;
  
    /* Reseting previous label values */
    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;
}


init.js
$(function(){
    $("#form").validate({ // your form id (you can also use class name instead id)
        rules: {
            name: {
                required: true, // makes the element always required
                minlength: 3 // makes the element require a given minimum length
            },
            company: {
                required: true
            },
            phone: {
                required: true,
                number: true, // makes the element require a decimal number
                minlength: 6
            },
            email: {
                required: true,
                email: true // makes the element require a valid email
            },
            message: {
                required: true
            }
        },
        messages: { // specify custom messages
            name: {
                required: 'This field is required',
                minlength: 'Minimum length: 3'
            },
            company: {
                required: 'This field is required',
            },
            phone: {
                required: 'This field is required',
                number: 'Invalid phone number',
                minlength: 'Minimum length: 6'
            },
            email: 'Invalid e-mail address',
            message: {
                required: 'This field is required'
            }
        },
        success: function(label) {
            // set 'ok' class to error-labels to indicate valid fields and call fadeOut() function after 2000ms
            label.html('OK').removeClass('error').addClass('ok');
            setTimeout(function(){
                label.fadeOut(500);
            }, 2000)
        }
    });
});


Наша форма и проверка заполнения полей готовы!

Демо: смотреть
Скачать: awesomeform.zip [35,76 Kb] (cкачиваний: 786)
Опубликовал dimas_ua, 13-05-2011, 00:00 Комментариев: 2
 (голосов: 7)
Пишет Memfis, 16 мая 2011 08:09
  • Сообщений: 0
  • Новостей: 0
А как сделать чтобы в поле могли вводить только буквы? Для цифр там параметр number:true, а для букв?
Пишет Игорь, 9 июня 2011 00:57
  • Сообщений: 0
  • Новостей: 0
А как сделать чтоб в сообщении Не могли писать html тэги, ссылки и т.д.