jQuery: делаем формы интерактивными

С появлением различных javascript фреймворков, разработчикам стало намного проще создавать интерактивные пользовательские интерфейсы. Сюда так же можно отнести взаимодействие пользователя с формами. Наверное, уже практически во всех популярных cms, появилась возможность проверки с помощью AJAX’а введеных данных. В своем посте я подготовил 5 простых примеров, показывающих, как с помощью jQuery можно сделать формы более интерактивными.

Счетчик символов
Первый пример — это счетчик символов. Ниже представлен результат (попробуйте что-нибудь ввести в поле):

Код примера:

<script type="text/javascript">
		$(function() {
			 $("input[id='input-text']").keyup(function count(){
				counter = $("input[id='input-text']").val().length;
            $("#count").html("Всего символов: "+counter);
			});
		});
		</script>
<input type="text" id="input-text"/><span id="count"></span>

При событии keyUp(), переменной counter присваевается значение, равное количеству символов в поле. После чего используя метод html() добавляем значение в элемент span.

Ограничитель символов
Этот пример, очень похож на первый. С той лишь разницей, что здесь добавлено ограничение на количество вводимых символов.

Код примера:

<script type="text/javascript">
		$(function() {
			$("input[id='input-text-2']").keyup(function countRemainingChars(){
			maxchars = 10; //Ограничение в 10 символов
			counter = $("input[id='input-text-2']").val().length;
		    if(counter <= maxchars){
		        $("#count-2").html(maxchars-counter + " символов осталось");
		    } 
			if(counter == maxchars) {
				$("#input-text-2").attr({ maxlength: maxchars});
			}
			});
		});
		</script>
<input type="text" id="input-text-2"/> <span id="count-2"></span>

Максимальное количество вводимых символов задается в переменной maxchars. Как только количество символов достигает 10, к текстовому полю добавляется атрибут maxlength.

Простая валидация поля
Этот пример показывает, как можно сделать простую валидацию формы. Сообщение об ошибке выводится, если после потери фокуса, поле осталось пустым.

Код примера:

<script type="text/javascript">
		$(function() {
					$("input[id='input-text-3']").blur(function validate(){
				    el = $("input[id='input-text-3']");
				    inputString = el.val();
				    if(inputString==""){
						$("#msg").css({ "color": "red", });
				        $("#msg").html(" Вы должны заполнить поле");
				    } else {
				        $("#msg").css({ "color": "green", });
						$("#msg").html(" Ок");
				    }
});
		});
		</script>
<input type="text" id="input-text-3" maxlength="10" /><span id="msg"></span>

При событии blur(), проверям введены ли символы в поле или нет. Если введены то выводим сообщение Ок, иначе сообщение о ошибке.

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

Код примера:

<script type="text/javascript">
		$(function() {
			$("ul[id='values'] li").click(function suggestValues(){
			input = $("input[id='input-text-4']");
			el = $(this).html();
			$(this).remove();
			newinput = input.val();
			newinput = (newinput + el + ", ");
			input.val(newinput);
			});
		});
		</script>
<input type="text" id="input-text-4" size="40"/>
<ul id="values" style="list-style-type: none; margin-left: 0; padding-left: 0;">
    <li>Яблоко</li>
    <li>Апельсин</li>
    <li>Клубника</li>
</ul>

Для добавления значений в поле используем событие click(). При клике берем значение из списка и добавляем в текстовое поле.

Добавление элементов в список
В этом примере, в отличие от предыдущего значения выбираются из выпадающего списка.

Код примера:

<script type="text/javascript">
		$(function() {
			$("#submit-list").click(function selectItem(){
			s = $("option:selected")
			el = s.text();
			destination = $("#selected-items-list");
			$(destination).append('<li>'+el+'</li>');
			$(destination +':last').css('display', 'none').fadeIn(1000);
			$("option:selected").remove();
			if($('#my-list option').length==0){
				$('input[id=submit-list]').attr('disabled', 'disabled');
			}
			});
		});
		</script>
<select id="my-list">
    <option value="1">Яблоко</option>
    <option value="2">Апельсин</option>
    <option value="3">Клубника</option>
</select>
<input type="button" id="submit-list" value="Добавить"/>
<ul id="selected-items-list" style="list-style-type: none; margin-left: 0; padding-left: 0;"></ul>

После того, как вы нажали кнопку добавить, значение добавлется в список с помощью метода append(). Так же при внесении значений в список, я добавил fadeIn() эффект.

• jQuery: полезные примеры, при работе с DOM
• Выделение всех элементов checkbox с помощью jQuery
• Русско-английский переводчик, с помощью Google AJAX Language API
• Работа с JSON в PHP и jQuery
• jQuery JSON: получаем данные из твиттера

Теги: JavaScript, jQuery