Меню сайта
Для Веб-Мастера Скрипты для сайта Онлайн игры Видео онлайн Картинки Заказать рекламу О нашем сайте Правила нашего сайта Обратная связь Карта сайта XML
Реклама
Наш опрос
Кому на Руси жить хорошо?
Всего ответов: 893
Статистика


Онлайн всего: 1
Гостей: 1
Пользователей: 0

Гости Пользователи
Дополнительно
Главная » Скрипты для сайта » Скрипты в AJAX окне

Контактная форма на jQuery для Ucoz

Хочешь сказать спасибо? Кликни на рекламный баннер.

14.06.2012, 16:44
Создаём контактную форму, в которой будут отображаться ошибки в случае не правильного заполнения полей формы.
Разметка HTML :
Code
<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> </label>
<input type="submit" class="btn" value="Отправить" />
</p>
  </form>

Добавить в CSS :
Code
.blocks p {
margin-bottom:15px;
position:relative;
}
   
.btn {
display:block;
float:left;
height:31px;
line-height:31px;
padding:0 10px;
background:url(/images/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(/images/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(/images/icook.gif);
background-color:#deefca;
color:#577530;
}
   
.blocks label.error {
background-image:url(/images/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;
}

jQuery :
Code
$(function(){
   
  $("#form").validate({
  rules: {
  name: {
  required: true,
  minlength: 3
  },
  company: {
  required: true
  },
  phone: {
  required: true,
  number: true,
  minlength: 6
  },
  email: {
  required: true,
  email: true
  },
  message: {
  required: true
  }
  },
  messages: {
  name: {
  required: 'Обязательное поле',
  minlength: 'Мин. длина: 3'
  },
  company: {
  required: 'Обязательное поле'
  },
  phone: {
  required: 'Обязательное поле',
  number: 'Недопустимый номер',
  minlength: 'Мин. длина: 6'
  },
  email: 'Недопустимый e-mail',
  message: {
  required: 'Обязательное поле'
  }
  },
  success: function(label) {
  label.html('OK').removeClass('error').addClass('ok');
  setTimeout(function(){
  label.fadeOut(500);
  }, 2000)
  }
  });
   
});





Если у Вас возникли вопросы по установке или работе скрипта, то задайте их в комментариях и мы постараемся вам помочь.

Источник материала: Неизвестен/Не указан
При коприровании материала просьба ставить ссылку на оригинальную статью.

Ссылка:
BB-код:
HTML-код:
Добавил: -angel- | Просмотров: 11736 | Загрузок: 816 | Рейтинг: 4.1/10
Теги: скрипт, вид формы, jQuery, обратная связь, форма обратной связи для ucoz
Всего комментариев: 0
ВНИМАНИЕ !!!
Добавлять комментарии могут только зарегестрированные пользователи!
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
А знаете ли Вы, что ...

У кузнечиков около 900 мышц, у некоторых гусениц до четырех тысяч.


Реклама
Популярные материалы
Наша кнопка
Мы будем вам признательны, если вы разместите нашу кнопку у себя на сайте:

Скрипты для сайта

Друзья сайта