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



jquery-forms
С появлением различных 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() эффект.



Теги: ,

Комментарии

  1. http://habrahabr.ru/blogs/jquery/86604/ а вот тут меня ругали за картинку — 😉

    Reply

  2. @porcelanosa
    Умеете вы завлекать людей 🙂

    Reply

  3. С инпутом все ясно, а ты попробуй подсчитать кол-во символов в текстарии! И увидишь, что служебные символ ява-скрипт не считает, например перенос строки, табуляция и тд. И когда происходит валидация на стороне сервера, например средствами php, то разница в длине будет!!!

    Reply

  4. @Максим Нагайченко
    Вот пример — http://www.ajaxray.com/blog/2007/11/09/interactive-character-limit-for-textarea-using-jquery/, в котором автор прекрасно справляется с подсчетом символов в текстарии.

    Reply

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