Блог старого компьютера

Блог старого компьютера


Главная Jquery Проверка форм на jquery

Проверка форм на jquery

17.06.2013 13:47 Администратор Jquery
Печать PDF

Довольно часто возникает необходимость в создании формы которую заполняет пользователь. Форму создать много ума не нужно. К форме так же необходимо сделать интерактивную прокерку которая проверяла бы поля на пустоту и если какое то поле не заполненно то форма не отправлялась (код обходит все обязательные поля циклом и проверяет заполнено ли оно), а у форм всплывала подсказка. Для этих случаев я набросал небольшой jquery код для проверки подобных форм. Этот код можно прикрепить пркатически к любой форме без особых сложностей.

Для использования данного способа нет необходимости сильно модифицировать поля для заполнения. Достаточно просто ко всем обязательным полям добавить класс required и добавить описание в атрибут title. Текст из него будет выводится в качестве всплывающей подсказки.

И так предоставлю весь код страницы (для пример предоставлю всего несколько полей):

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
function mes(elem){
title = $(elem).attr("title");

$(elem).next('.r').html(title).css('display', 'block').animate({"opacity": "0.7", "top": "-25"}, 400);
}

$(".required").focus(function (){
mes(this);
});

$(".required").blur(function (){
$(this).next('.r').animate({"opacity": "0", "top": "5"}, 400, "linear",function(){
$(this).css('display','none');
});
});

$('#submit-button').click(function() {
$('input').each(function(index, element){
var ass =$(this).attr("class");
if(ass.search('required')!=-1){
if($(this).val()==''){
requ =1;
mes(this);
}
}
});
$('textarea').each(function(index, element){
var ass =$(this).attr("class");
if(ass.search('required')!=-1){
if($(this).val()==''){
requ =1;
mes(this);
}
}
});
if(requ==1){
return false;
}else{
return true;
}
});

});
</script>

<style>
.r {
background: black;
border-radius: 3px;
color: white;
display: none;
font-size: 11px;
opacity: 0;
padding-left: 5px;
padding-right: 5px;
padding-top:3px;
padding-bottom:3px;
position: absolute;
right: 0px;
top: 5px;
font-family:arial;
/*width: 100px;*/
text-align:center;

}
.field {
position: relative;
}
</style>

<form action="" method="post">
<table>
<tr>
<td>Заголовок:<span class="mandatory">*</span></td>
<td>
<div class="field">
<input class="required" type="text" name="head" title="Например: Продам коляску"><div class="r"></div>
</div>
</td>
</tr>
<tr>
<td>Текст объявления:<span class="mandatory">*</span></td>
<td>
<div class="field">
<textarea class="required" name="text" title="Введите текст вашего объявления"></textarea><div class="r"></div>
</div>
</td>
</tr>
<tr>
<td>Телефон:<span class="mandatory">*</span></td>
<td>
<div class="field">
<input class="required" type="text" name="tel" title="Введите ваш телефон для связи"><div class="r"></div>
</div>
</td>
</tr>
<tr>
<td><input type="submit" id="submit-button" value="Разместить"></td>
<td></td>
</tr>
</table>
</form>

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

Надеюсь у вас получится не чуть не хуже!

 

Комментарии  

 
0 #1 Tutanhamon 28.01.2015 23:20
Неплохой обзор. Вообще, валидация имеет свои особенности и тонкости. Все очень сильно зависит от задач. Так, например, если формы не используют html тег "form", что особенно характерно для приложений с кучей скриптов, то большинство плагинов попросту не обработают формы на div-ах. Так же все зависит еще от способа валидации. Например, на многих формах просят указать поле Url. С одной стороны, поле не обязательное. С другой стороны, если пользователь его заполняет, то такое поле так же необходимо проверять на валидность. Ведь кривой Url в последующем может привести к ошибкам. Если интересно, то более подробно об этом можно узнать в обзоре Валидация произвольных форм и контейнеров на jQuery
Цитировать
 

Добавить комментарий


Защитный код
Обновить

Поиск

Голосование

Что Вы думаете на счет битрикса?