barbitoff programmer`s blog

Здесь я публикую заметки из программерской жизни: грабли, на которые мне случилось наступить, проблемы, для которых было найдено элегантное (или не очень) решение, а также все, с чем мне пришлось столкнуться и чем хотелось бы поделиться =)
PS Если хотите меня поблагодарить - на странице есть 3 места, чтобы это сделать =)
Показаны сообщения с ярлыком autocomplete. Показать все сообщения
Показаны сообщения с ярлыком autocomplete. Показать все сообщения

пятница, 20 апреля 2012 г.

Валидация полей ввода, использующих jQuery.UI-виджет autocomplete

Задача:

При валидации формы с использованием плагина jquery.validation проверить, что в полях, использующих виджет автодополнения jQuery UI (autocomplete) введено значение, входящее в их список автодополнения (в качестве источника автодополнения используется статичный массив).

Решение:

Добавляем свой метод валидации и привязываем его к классу "ui-autocomplete-input", который устанавливается autocomplete-виджетом на полях ввода, к которым он привязан:
jQuery.validator.addMethod("jqueryUiAutocomplete",function(value, element){
if(this.optional(element))
 return true;
return $(element).autocomplete("option","source").indexOf(value)!=-1;
},"Пожалуйста, выберите значение из списка");
jQuery.validator.addClassRules("ui-autocomplete-input",{jqueryUiAutocomplete:true}); 
Необходимо учесть деталь, что метод Array.indexOf есть не во всех браузерах (как это поправить, я уже когда-то давно писал тут). Если используется другой вариант источника данных для автозаполнения (функция / AJAX), такой вариант не подходит.

среда, 29 февраля 2012 г.

Отключение автозаполнения полей форм

Иногда запоминание браузером значений, введенных / выбранных пользователем в поле формы, мало того, что неудобно, так ещё и портит корректную работу приложения. Например, если некоторое поле играет роль фильтра, работающего по onChange, то при перезагрузке страницы браузер подставит в него предыдущее введенное / выбранное значение, тогда как фильтр на самом деле не отработает, т.к. событие "change" сгенерировано не будет. Отключается это установкой нестандартизированного атрибута autocomplete в значение "off" (который может быть задан для отдельного input`а / select`а, или для формы в целом):

<select onChange="applyFilter()" autocomplete="off">
      <option ...
Чтобы не ломалась валидация документа на соответствие требованиям стандарта, можно расширить DTD документа следующим образом (спасибо lany):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" [
<!ATTLIST input autocomplete CDATA #IMPLIED>
]>
Приведенный пример можно расширить для разрешения использования атрибута "autocomplete" у тегов select и form.

PS. В HTML 5 атрибут "autocomplete" для тега "input" стал стандартизированным.