У меня есть форма, которая использует jQuery Validate и Masked Введите для номера телефона и полей почтового индекса США.
Например, для американского почтового индекса Masked Input позволяет вводить только цифры и заставляет либо формат "99999", либо "99999-9999" (где 9 может быть любым числом). Правило Validate требует того же. Но в некоторых случаях Validate помещает поле как недопустимое, когда оно действительно действительно.
Спецификация кода
Регулярное выражение, которое jQuery Validate использует в поле почтового индекса, ^\d{5}$|^\d{5}\-\d{4}$.
Маска, которую я применяю с Masked Input, .mask('99999?-9999')
Шаги по воспроизведению
Конфликт между ними возникает, когда я делаю следующее:
- Заполните недопустимый почтовый индекс (скажем, три цифры)
- Вкладка вдали от поля. Masked Input стирает ввод (ожидаемое поведение), а jQuery Validate отмечает его как недопустимый, поскольку он пуст (также ожидается).
- Вернитесь в поле zip и заполните действительный 5-значный почтовый индекс.
- Вкладка вдали от поля. Он по-прежнему отмечен как недопустимый. Это неожиданно.
Эта проблема делает не, если я заполняю 9-значный почтовый индекс.
Гипотезы
Я думаю, что эта ошибка связана с тем, что в случае 5-значного почтового индекса Masked Input временно вставил "-____", чтобы показать пользователю, что они могут дополнительно ввести тире и еще четыре цифры. Это удаляется при размытии, но перед его удалением поле проверяется и не выполняется, поскольку символы подчеркивания не разрешены.
Эта гипотеза подтверждается тем фактом, что, если форма впоследствии будет повторно проверена, пройдет почтовое поле. Я сделал это двумя способами:
- Отправляя форму; все поля повторно проверяются при нажатии кнопки отправки, заполняется почтовое поле и форма отправляется.
-
Установив событие
blur, которое повторно проверяет это конкретное поле. Например:$( "# zipcode" ). blur (function() {$ (this).closest('form'). validate(). element ($ (this));});
Это может быть хакерским решением, но не очень удовлетворительно, потому что 1) настройки по умолчанию уже повторно проверяются при размытии, поэтому это повторяется и 2) для этого требуется дополнительный код кроме обычных правил Validate.
Кто-нибудь еще сталкивается с этой проблемой? У вас есть более элегантное решение, чем настройка дополнительного прослушивателя событий размытия?
Обновление: применение хакерского решения
Даже применение взломанного решения выше не так хорошо, как хотелось бы. Например, это не работает:
$appDiv.delegate('input,select,textarea','blur',function(){
$(this).closest('form').validate().element($(this));
});
... и не делает этого:
$('input,select,textarea').live('blur',function(){
$(this).closest('form').validate().element($(this));
});
... но это делает:
$('input,select,textarea').each(function(){
$(this).blur(function(){
$(this).closest('form').validate().element($(this));
});
});
Поскольку эти элементы загружаются AJAX, версия .each должна запускаться каждый раз, когда загружается раздел формы.
