barbitoff programmer`s blog: Form

barbitoff programmer`s blog

Здесь я публикую заметки из программерской жизни: грабли, на которые мне случилось наступить, проблемы, для которых было найдено элегантное (или не очень) решение, а также все, с чем мне пришлось столкнуться и чем хотелось бы поделиться =)

PS Если хотите меня поблагодарить - на странице есть 3 места, чтобы это сделать =)

Показаны сообщения с ярлыком Form. Показать все сообщения

четверг, 19 апреля 2012 г.

Валидация ip-v4 адресов на jquery-input-ip-address-control и jquery.validation

1) Подключаем нужные скрипты (качаются тут и тут):

<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script type="text/javascript" src="js/jquery.input-ip-address-control-1.0.min.js"></script>

2) Добавляем скрипт:

$(document).ready(function(){
jQuery.validator.addMethod("ipv4",function(value, element)
{
return this.optional(element) || value!="___.___.___.___";
});
jQuery.validator.addClassRules("ip-address-input",{ipv4:true});
$("#myFormId").validate(
{
errorPlacement: function(error, element){} // no error messages
});
$('input.ip-address-input').ipAddress({v:4});
});

Этот скрипт включит валидацию для формы #myFormId (про неё я уже писал тут), а также обеспечивает все поля ввода с классом "ip-address-input" маской для ввода ip-v4 адреса. В случае, если у такого поля ввода установлен также класс "required", форма не отправится, если в поле не введен корректный ip-v4 адрес (в функции-валидаторе значение проверяется только на неравенство "___.___.___.___", т.к. jquery-input-ip-address-control не даст ввести в поле некорректный ip-v4) . Пример такого поля ввода:

<input type="text" class="ip-address-input required" name="ip_1" />

Также, чтобы незаполненные поля подсвечивались красной рамкой, нужно добавить css:

.error
{
border-color: red;
}

среда, 18 апреля 2012 г.

Простейшая валидация обязательных полей формы с jQuery-плагином Validation

Задача:

Не дать пользователю отправить формы с незаполненными некоторыми полями, подсветить незаполненные поля красной рамкой при попытке отправки.

Решение:

1) Подключаем плагин (скачать можно тут):

<script type="text/javascript" src="js/jquery.validate.min.js"></script>

2) Устанавливаем класс "required" для тех полей формы, которые мы хотим сделать обязательными:

<input type="text" name="ip" size="30" class="required"/>

3) Добавляем JS-код:

$(document).ready(function(){
$("#myFormId").validate(
{
errorPlacement: function(error, element){} // no error messages

});
});

Здесь предполагается, что валидируемая форма имеет идентификатор "myFormId". Пустая функция errorPlacement позволит не показывать не нужные текстовые сообщения о незаполненности поля (т.к. нам достаточно только подсветки).

4) Делаем собственно подсветку незаполненных полей, добавляя CSS:

.error
{
border-color: red;
}

среда, 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" стал стандартизированным.