jQuery валидация простых форм

Опубликовано: 30 Декабрь 2011Автор ratemir

Валидация форм с помощью jQuery очень удобная и важная вещь. В первую очередь происходит проверка формы без перезагрузки страницы. В интернете без труда можно подобрать себе подходящий плагин. Но иногда бывает необходимо осуществить обработку на ошибки небольщих, простых форм. Для этих целей конечно, не хочется цеплять на сайт многокилобайтовые jQuery плагины. В них зачастую большая часть функциональности бывает просто бесполезна и не используется. Идя в направлении уменьшения размера страниц, мы можем ускорить их загрузку, не на много конечно, но иногда это существенно.

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

Для начала html код.

<form action="#" id="contactForm" method="post">
      <ul>
	 <li>
	      <label for="contactName">Ваше имя *</label>
	      <input type="text" name="contactName" id="contactName" value="" class="textinput requiredField" />
	</li>
	<li>
	       <label for="email">Email *</label>
	       <input type="text" name="email" id="email" value="" class="textinput requiredField email" />
	</li>
	<li class="textarea">
		<label for="commentsText">Сообщение *</label>
	        <textarea name="comments" id="commentsText" rows="10" cols="30" class="textinput requiredField"></textarea>
	</li>
	<li>
		<label for="checking">Если Вы хотите отправить мне сообщение, то не заполняйте это поле!</label>
		<input type="text" name="checking" id="checking" class="textinput checking" value="" />
	</li>
	<li>
		<input type="hidden" name="submitted" id="submitted" value="true" />
		<button id="buttons" type="submit">Отправить</button>
	</li>
   </ul>
</form>

Создаём нужный нам дизайн при помощи стилей CSS. Можно взять следующий код и добавить его в основной css файл Вашего сайта.

#contactForm ul{list-style:none;padding: 10px 0 10px 100px;}
#contactForm ul li{margin-bottom: 21px;position: relative;}
#contactForm .textinput{
    background: #E4E4E4;
    border-color: #979797 #CACACA #FAFAFA;
    border-style: solid;
    border-width: 1px;
	width: 170px;
	margin-left:100px;
    padding: 5px 0 5px 7px;}
#contactForm textarea.textinput{width: 270px;}
#contactForm input.checking{margin-top:30px;}
#contactForm label{position:absolute;left:0;top:0;}
#contactForm button{margin-left:100px;cursor:pointer;outline:none;}
.textmessage .error{width:170px;}
.error{
    color:red;
	padding-left: 10px;
    position: absolute;
    top: 0;}
.thanks{text-align:center;padding-top:10px;color:green;}

Вот и добрались до самого скрипта jQuery валидации. Какие функции он выполняет? Во-первых, при клике по кнопке отправки сообщения, происходит проверка полей на заполненность, а поля с email на соответствие стандартам. Во-вторых, при нажатии курсором на экране монитора вне сфокусированного поля, текст с предупреждением исчезает или остаётся, в зависимости от прописанных в скрипте условий. Следующий код нужно скопировать на страницу Вашего сайта между тегами <head></head>

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
<script type="text/javascript">
$(document).ready(function() {
    $('.requiredField').live('blur',function() {
	 if($(this).val() != ''){
	        if($(this).hasClass('email')) {
				var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
				if(!emailReg.test(jQuery.trim($(this).val()))) {
					$(this).parent().find('.error').html('E-Mail адрес не правильный.');
				}else{
				    $(this).parent().find('.error').remove();
				}
		}else{
                      $(this).parent().find('.error').remove();
		}
	  }else{
	       $(this).parent().find('.error').show();
	  }
      });
      $('#buttons').live('click',function() {
		$('#contactForm .error').remove();
		var hasError = false;
		$('.requiredField').each(function() {
			if(jQuery.trim($(this).val()) == '') {
				var labelText = $(this).prev('label').text();
				$(this).parent().append('<span class="error">Поле "'+labelText+'" обязательно для заполнения!</span>');
				hasError = true;
			} else if($(this).hasClass('email')) {
				var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
				if(!emailReg.test(jQuery.trim($(this).val()))) {
					$(this).parent().append('<span class="error">E-Mail адрес не правильный.</span>');
					hasError = true;
				}
			}
		});
		if(hasError) {
		    return false;
		}
	});
});
</script>
Метки: Рубрика: Технологии jQuery


Опубликовать в twitter.comПоделиться ВКонтактеПоделиться в FacebookПоделиться В Моем МиреОпубликовать в своем блоге livejournal.com
Если Вам понравилась статья, Вы можете получать новые материалы Ratemir.ru по: RSS или можете просто получать обновления блога на e-mail:

Оставить комментарий

Наверх