1. Главная
  2.  
  3. Статьи
  4.   Модули jQuery, как мощный инструмент увеличения привлекательности Вашего сайта

Модули jQuery, как мощный инструмент увеличения привлекательности Вашего сайта

На данный момент существует множество таких модулей которые облегчают работу обычных пользователей с сайтами, мы поговорим о самых популярных из них, они помогут сделать сайт более привлекательным и удобным для пользователя , что наверное является чуть ли не главным при разработке сайта!

-Где мы можем встретиться с этим зверем?

-Ответ прост, практически на любом мало-мальски нормальном сайте.

-А если подробнее?

-На официальном сайте jquery, на главной странице нажимаем кнопочку “RUNE CODE” и это наверное самый примитивный пример что такое jquery

А вообще мы их очень часто видим в заголовках сайтов (так называемые карусели или слайдеры) или красивые раскрывающиеся меню (аккордеоны), также всплывающие окна, календари, всплывающие подсказки, графики, таблицы, галереи, проверка форм. С последнего мы и начнём!

Существует их целое множество , но мы рассмотрим два наиболее популярных:

Validation (или как его называют ещё Validator)

Validate engine

Вещь не заменима при создании сайтов (если конечно на нём есть форма)!

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

Вот вам для сравнения два примера:

А теперь задачка: найти три отличия.

Кто нашёл получает печеньку :)

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

Это всё в действии можно посмотреть всё на том же сайте , по адресу : Санкт-Петербург ул. Бумажная … Да ладно шучу я , вот настоящий адрес зверька.

-Что нам потребуется для установки этого модуля?

-Две вещи, как в анекдоте, это прямые руки и сайт на который я дал ссылку парой строчек выше.

А точнее (опережая Ваш вопрос), таблица стилей для ошибок , в которой Вы любезно укажете с какой стороны будет появляться ошибка , какого цвета она будет и т.д. Подключённая библиотека jquery которую можно скачать на главной странице вышеозначенного сайта, ещё небольшой текст в шапке ().

<script>
  $(document).ready(function(){
    $("#commentForm").validate();
  });
</script>

Который я любезно привёл Вам, а теперь разберём его на запчасти:

<script> - обозначает что дальше идёт javascript.

$(document).ready(function(){ - обозначает что мы ожидаем загрузки страницы и начало функции.

$(“#commentForm”).validate(); -код который указан до точки указывает к какому элементу мы привязываем проверку (!) в теге form должен быть указан уникальный идентификатор такого вид id=»commentForm», а то что идёт после точки указывает, что именно к этому элементу мы привязываем проверку, то есть, если у нас будет несколько форм на странице мы можем проверять не все, а только те которые мы захотим (!).

}); - этот набор скобок показывает , что мы завершили работу функции.

Последнюю строчку писать мне лениво , она обозначает окончание кода javascript.

А теперь перейдём к заключительному шагу , нужно указать что и как мы хотим проверить , потому что если при создании сайта мы укажем, что будем проверять поле имени на правильность написания почты , будет скажем так не очень приятно объяснять заказчику почему так , а не как это должно быть … Так переключаемся с грустного на весёлое , а точнее на код который мы должны указать для самих полей и барабанная дробь , тадам вот он <textarea id="ccomment" name="comment" cols="22" class="required"></textarea>

Это проверка поля комментария на заполнение и всё это делает полтора десятка букв class="required", эта строка сигнализирует модулю, что "Я ОБЯЗАТЕЛЬНО ПОЛЕ, ПРОВЕРЬТЕ МЕНЯ ПОЛНОСТЬЮ!" и если на момент нажатия кнопки оно не будет заполнено (О УЖАС), у нас появится ошибка.

Резюме:
Что ставим в плюс :Простой , лёгкий в использовании , минимум компонентов . А теперь о грустном : если нет возможности вывести ошибку сбоку , её по логике стоит поместить снизу или верху (вверху наверное как-то удобнее) , но тогда нам придётся задавать большой интервал между полями формы , либо при выводе ошибок наша форма будет «расти в высоту» , что не есть хорошо ?

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

Здесь будет действовать правило «чем дальше в лес , тем толще партизаны» (!!!) И файлов будет больше , да чего я размазываю , приступаем ! Сестра скальпель, зажим, спирт, огурец , эх хорошо пошло:

jquery.validationEngine.js – это модуль который будет проверять всё то что мы напишем в поля формы.

jquery.validationEngine-en.js - это файл ошибок, скажем так вот здесь, да именно здесь, да не там куда вы смотрите (снова шутканул), находятся правила проверки, но вот незадача, они на английском языке, ну об этом позже.

validationEngine.jquery.css - а это стили для ошибок, те милые штучки которые всплывают над полями формы, их цвет, размер, … задаётся именно здесь (!).

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

Ещё нам также понадобится аналогичный первому в шапке и снова размещу его прямо здесь, вот только не надо тыкать палицами в секретное оборудование , вот оно

	<script> 
		jQuery(document).ready(function(){ 
		// binds form submission and fields to the validation engine 
			jQuery("#commentForm").validationEngine(); 
		}); 
			/** 
			* 
			* @param {jqObject} the field where the validation applies 
			* @param {Array[String]} validation rules for this field 
			* @param {int} rule index 
			* @param {Map} form options 
			* @return an error string if validation failed 
			*/ 
			function checkHELLO(field, rules, i, options){ 
			if (field.val() != "HELLO") { 
			// this allows to use i18 for the error msgs 
			return options.allrules.validate2fields.alertText; 
			} 
			} 
	</script> 

Всё осталось по старому , хотя его здесь в разы больше , всё тот же идентификатор формы , то бишь id="commentForm"… А всё остальное комментарии разработчиков , которые заботятся о нас любимых , чтобы мы не мучились . Но я всё же их переведу Вам, да ещё бонусом объясню !

Ой чуть не забыл, для совсем ленивых кто не посмотрел в действии этот модуль вот Вам скрин:

Как видите даже при ограничении по ширине, поля формы не расползаются как тараканы , а теперь как это всё дело работает , да практически так же у полей ввода указывается class="validate[required]" И эти поля становится обязательным для проверки, ничего сложного, но остался ещё один не решённый вопрос, а как же сделать вывод ошибки на нашем родимом, богатом русском языке ?! Сейчас я Вас пошлю, а Вы идите и никуда не сворачивайте: открываем файл jquery.validationEngine-en.js находим строку содержащую "required" и чуть ниже заменяем текст как в примере "alertText": "* Это обязательное поле" (строго тот который в кавычках) , проверяем нашу форму "о чудо …" и просто восторгаемся

P.S. те кто считают , что здесь много лишнего и не по делу бу-бу-бу , бла-бла-бла … Идите в лес, хотя настоятельно рекомендую вот сода jquery.com.

Спасибо за внимание!


Комментарии

Адександр  · 28.10.2014 17:27:28
как изменить формат анализируемой даты?
написано
$( ".datepicker" ).datepicker({
dateFormat:'dd/mm/yy'
});
но куда его вставить мне не понятно.
ответить
Noname  · 20.12.2013 14:21:17
Дмитрий, добрый день!
Я снова к Вам за советом/помощью.
У меня на сайте есть капча с генерируемыми картинками на php, можно ли как-нибудь привязать к ней плагин, чтобы сообщения о неверно введенных цифрах/буквах выводилось с помощью плагина?
ответить
Noname  · 02.12.2013 15:31:43
Дмитрий, не дождалась ответа от Вас.
Подскажите, почему плагин работает только в IE, в других браузерах - нет....в чем может быть причина?
ответить
Дмитрий  · 02.12.2013 20:17:07
Опытным путем заставил работать Вашу форму ...
http://prntscr.com/287nce
Достаточно поменять местами <form> и <table>,
внизу соответственно </table></form>. Вообще хороший способ проверки кода - постепенно убирать все лишнее (малозначимое) для контекста проверки.
ответить
Noname  · 03.12.2013 09:19:27
Дмитрий! Благодарность моя не имеет границ!
Огромное Вам спасибо за внимание к моей проблеме.
Удачи Вам во всем!)
ответить
Noname  · 20.11.2013 14:36:50
Подскажите, пожалуйста, почему не проверяется выпадающий список (select)?
Поставила у него id="comment" cols="22" class="validate[required]" , а не проверяет, а просто input проверяет....
И еще, сообщение об ошибке появляется и тут же исчезает, а демо оно стоит пока на него не нажмешь.
Где подправить?
ответить
Дмитрий  · 21.11.2013 00:18:10

Убедитесь, что у первого "option" внутри "select" - пустое значение атрибута "value", например:
<select class="validate[required]" id="my-select">
<option value=""> Выберите число</option>
<option value="1">Один</option>
<option value="2">Два</option>
</select>
Вот несколько примеров для различных типов полей http://www.position-relative.net/creation/formValidator/demos/demoFieldTypes.html

ответить
Noname  · 21.11.2013 11:51:17
Спасибо что ответили, я сама уже разобралась(перевела документацию).
А вот еще возник вопрос, в русской версии скрипта, есть строки
"required": { // Add your regex rules here, you can take telephone as an example
"regex": "none",
"alertText": "* Необходимо заполнить",
"alertTextCheckboxMultiple": "* Вы должны выбрать вариант",
"alertTextCheckboxe": "* Необходимо отметить"
},

......так вот, хочу на свой список поставить "alertTextCheckbox": "* Вы должны выбрать вариант", а не совсем понятно как правильно записывать такой класс ...
ответить
Noname  · 21.11.2013 13:18:45
в денвере работает только в IE, а на серваке вообще нигде не работает
ответить
Noname  · 21.11.2013 15:58:04
Вот такая ошибка появилась после установки на сервер:
Сведения об ошибке на веб-странице
Сообщение: Объект не поддерживает это свойство или метод
Строка: 28
Символ: 5
Код: 0
URI-код: http://test.energosbyt.by/js/jquery.validationEngine.js

Как это можно исправить?
ответить
Дмитрий  · 21.11.2013 18:01:28
А где ваша страничка с формой? На самом сайте у вас подключена устаревшая библиотека jQuery js/jquery-1.6.2.min.js ... нужно как минимум 1.7, а вообще давно уже 1.9 есть :)
ответить
Noname  · 26.11.2013 09:58:29
Страница называется Электронные обращения. Поставила библиотеку 10.2, но это никак не меняет дело. Работает только в IE ( и на сервере и на локальной машине)в остальных браузерах - нет....почему так? Очень хочу этот плагин внедрить, помогите разобраться, пожалуйста.
ответить
Дмитрий  · 02.12.2013 20:20:34
Извините, не заметил Вашего сообщения :( . Ответил выше на следующее.
ответить
Сергей  · 13.02.2013 13:49:16
а какие ещё атрибуты кроме field.val() (напр.: name, class, ...) можно получить?
ответить
Дмитрий  · 13.02.2013 14:23:58
Можно так field.attr('name') или field.attr('class')
http://jquery-docs.ru/Attributes/
ответить
Дмитрий  · 07.02.2013 19:57:28
Привет всем!
Интересная и полезная статья про jquery и проверку форм "на лету", написанная в необычной манере ироничного обращения к читателю :))
Захотелось внести свой посильный вклад в описание плагина validationEngine ...
Итак, на страничке https://github.com/posabsolute/jQuery-Validation-Engine находится достаточно подробная документация, однако она англоязычная, потому переведу некоторые интересные моменты:

1. Где скачать и что подключать?
Скачать полный архив с доками, стилями, скриптами, примерами и переводами (в том числе jquery.validationEngine-ru.js) можно по этой ссылке https://github.com/posabsolute/jQuery-Validation-Engine/archive/master.zip

Минимально необходимые для работы плагина файлы из архива, которые нужно подключить на странице с формой:
/js/jquery-1.8.2.min.js, /js/jquery.validationEngine.js, /js/languages/jquery.validationEngine-ru.js, /css/validationEngine.jquery.css

2. Как выводить свои сообщения об ошибках?
Чтобы заменить стандартные сообщения об ошибках, не обязательно редактировать файл jquery.validationEngine-ru.js, можно использовать специальные атрибуты непосредственно в проверяемых полях, например:
- для class="validate[required]" data-errormessage-value-missing="Поле должно быть заполнено! Или любой свой текст сообщения ..."
- для class="validate[required,minSize[6]]" data-errormessage-range-underflow="Введите не меньше 6 символов!"

3. Как изменить расположение сообщений об ошибках?
Для этого может пригодиться атрибут полей data-prompt-position, который управляет расположением таблички относительно проверяемого поля, например:
- сверху слева data-prompt-position="topLeft"
- снизу слева data-prompt-position="bottomLeft"
- сразу после поля (в одной строке) data-prompt-position="inline"
Также можно указать величину смещения в пикселях, относительно проверяемого поля, например:
- на 70px правее и на 10px выше левого верхнего угла проверяемого поля data-prompt-position="topLeft:70,-10"

4. Некоторые методы (actions)

$("#formID").validationEngine('validate'); - проверяет форму и возвращает результат проверки без отправки формы (без кнопки sumbit)

$('#formID').validationEngine('hideAll'); - скрывает все сообщения об ошибках

5. Некоторые настройки (options)
Настройки указываются в шапке при инициализации плагина в фигурных скобках. Несколько настроек указывается через запятую, например:
$("#formID").validationEngine( {

binded: false, // Отменяет проверку при снятии фокуса с поля. Проверка происходит только после нажатия кнопки submit или запуска через вызов метода validate.

showOneMessage: true, // Отображает только первую ошибку. Очень полезно, когда несколько сообщений налезают друг на друга!!!

onValidationComplete: function(form, status) { // Обработчик, который запускается после проверки формы. Функция должна вернуть true, чтобы данные формы были отправлены через submit.

     if (status) {
         alert("Все верно!")
         return true;
     } else {
         alert("Исправьте ошибки!")
    }
  }

} );


Пока, пожалуй, достаточно. Если заметите ошибки - больно не пинайте, а пишите ответы в комментариях :))). Вопросы тоже приветствуются! Позже расскажу про custom-проверки и Ajax-обработчики...


ответить
Vismut  · 07.02.2013 23:40:43

Спасибо Дмитрию за дополнение моей статьи, с меня пиво, кстати очень важные дополнения

P.S. Не обнуляй переменные, будь плохим парнем;)

ответить
Сергей  · 06.02.2013 13:49:50
а как можно получить возвращаемое значение валидации для определения дальнейших действий, если моя форма не использует SUBMIT?
ответить
Дмитрий  · 07.02.2013 16:44:57
Здравствуйте, Сергей!

Получить возвращаемое значение валидации можно, например, так:

alert ( $('#commentForm').validationEngine('validate') );
ответить
Сергей  · 04.02.2013 15:45:43
Спасибо за статью.
Перед этим наткнулся на Validation-Engine на англ., но на родном языке стало ещё более ясно.
ответить
Антон Евтеев  · 08.12.2012 19:47:54
Классная статья!
ответить

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

Пункты, отмеченные *, являются обязательными к заполнению