наверх





Создадим простую и удобную функцию на jQuery для проверки заполнения формы. Так же, сделаем подсветку полей, у которых поля не были заполнены.


Давайте рассмотрим простой пример проверки формы jQuery, с помощью которого можно было бы заставить пользователя заполнить её, естественно без перезагрузки страницы.
Конечная функция будет универсальной и подойдет для любых форм, где нужно заполнить <input> или <textarea>.

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

Так же те поля у которых недостаточно символов будут подсвечиваться, чтобы пользователь заметил ошибку и исправил её.

Приступим с разметки.

<form action="" id="form">
<table> 
<tr>
<td>Ваше имя</td>
<td><input type="text" maxlength="36" minlength="4"></td>
</tr> 
<tr>
<td>Ваша фамилия</td>
<td><input type="text" maxlength="36" minlength="5"></td>
</tr> 
<tr>
<td>Ваши увлечения</td>
<td><textarea maxlength="150" minlength="15"></textarea></td>
</tr>
<tr>
<td></td>
<td><input type="button" value="Отправить" onclick="checkOut()"></td>
</tr>
</table>
</form>


Как видите, здесь мы использовали веденный нами атрибут minlength, который отсутствует в стандартах HTML, поэтому не стоит пугаться, jQuery все равно прочтет значение данного атрибута.

Так же, вместо submit, который нужен для отправки формы, мы будем использовать button - эта обычная кнопка, с ее стилями, но не будет отправлять форму. Так же, для проверки заполненности формы по клику, мы повесили на этот же элемент с button событие onclick, внутри которого написали название нашей функции проверки.

Изначально не помешало бы импортировать саму библиотеку jQuery, если это еще не было сделано:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>


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

<script type="text/javascript">
function trim( str, charlist ) { // аналог PHP функции trim()
	charlist = !charlist ? ' \\s\xA0' : charlist.replace(/([\[\]\(\)\.\?\/\*\{\}\+\$\^\:])/g, '\$1');
	var re = new RegExp('^[' + charlist + ']+|[' + charlist + ']+$', 'g');
	return str.replace(re, '');
}

function checkOut() { // Наша функция

var form = '#form'; // идентификатор (#id) или класс (.class) формы
var err = 3;	// количество проверяемых полей, input'ов и textarea

$('textarea, input[type=text]', $(form)).each(function (indx) { 	// проверяем textarea, input	
	if (trim($(this).attr('value')).length < $(this).attr('minlength')) { // проверка количества символов
		$(this).attr('id', 'err');	// вешаем идентификатор #err, в качестве стилизации рамки
		$(this).animate({opacity: '0'}, 500); // вешаем анимацию прозрачности, установленную на 0
		$(this).animate({opacity: '1'}, 500); // вешаем анимацию прозрачности, установленную на 1
		err++;
	}
	else $(this).removeAttr('id'); err--;  // в этом элементе нет ошибок, чистим идентифкатор #err, уменьшаем счетчик ошибок
});

if (err==0) $(form).submit(); // Если нет ошибок - отправляем данные.

}
</script>


Так же, здесь мы использовали аналог PHP функции trim(), который убирает пробелы с краев строки. Это нужно для того, чтобы не считать пробелы как символ. Основные действия отмечены комментариями.

Разберем основные используемые функции jQuery:

.each(callback(index, domElement))

Выполняет функцию callback для каждого из выбранных элементов. В callback передаются 2 параметра: номер элемента в наборе (нумерация начинается с нуля) и сам элемент в виде объекта DOM. Так же, вместо параметра domElement, как видно из функции проверки формы, можно использовать обычный this.

.animate(properties, [duration], [easing], [callback])

properties список CSS-свойств, участвующих в анимации и их конечных значений.
duration продолжительность выполнения анимации. Может быть задана в миллисекундах или строковым значением 'fast' или 'slow' (200 и 600 миллисекунд).
easing изменение скорости анимации (будет ли она замедляется к концу выполнения или наоборот ускорится).
callback функция, которая будет вызвана после завершения анимации.


.submit()

Вызывает событие submit, у выбранных элементов страницы. Метод является аналогом trigger("submit").

Ну а про функцию .attr() написано в конце статье "Переключающиеся меню".




Просмотр демо-варианта


Поделиться
Box-shadow генератор
Занимаетесь веб-разработкой? Полноценный кроссбраузерный box-shadow генератор с поддержкой нескольких теней.


Комментарии — 0


У вас нет прав для добавления комментария. Зарегистрируйтесь или авторизуйтесь.