В этом уроке мы собираемся построить удивительный вид формы контактной формы. Кроме того, мы собираемся для отображения ошибок использовать известный 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) 
        } 
    }); 
});

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

Добавлено: 20 Мая 2018 06:52:02 Добавил: Андрей Ковальчук Нравится 0

Добавить