Плагин jQuery Validation не запускается успешно, несмотря на «допустимый» класс - PullRequest
3 голосов
/ 30 января 2012

Я использую плагин jQuery Validation вместе с плагином qTip2 для отображения ошибок.

Я настроил два jsFiddles, чтобы продемонстрировать любопытную проблемуУ меня естьПервые два поля являются «обязательными», третье и четвертое поля являются «необязательными», а третье поле проверяет номер телефона.

Когда я заполняю необязательное поле номера телефона, я все еще проверяюномер телефона, даже если он не требуется.Однако, если пользователь вводит недопустимый номер (получает ошибку), передумывает и забивает поле номера телефона, сообщение об ошибке должно исчезнуть.

Здесь все работает как положено (плагин проверки со стандартными ошибками)(без qTip2)):

jsFiddle # 1: http://jsfiddle.net/avJ54/2/

Проблема в том, что он не работает при использовании qTip2 для отображения ошибок:

jsFiddle # 2: http://jsfiddle.net/WKryu/3/

На элементе класс error правильно удален и заменен на класс valid, но, очевидно, обработчик success делаетне огоньТем не менее, qTip2 зависит от обработчика success, который нужно запустить, чтобы уничтожить все пузырьки ошибок.

Две вещи заставят обработчик success вызвать и устранить эту ошибку.

1) Нажатие на кнопку отправки.

2) Заполнение «обязательного» поля и потеря его фокуса.

Итак, проблема в том, что я не могу получить qTip2, чтобы удалить сообщение об ошибкесразу в необязательных полях, когда они отключены, аналогично тому, как это работает в первом jsFiddle.

Поскольку обработчик success только кажется срабатывает при потере фокуса«Обязательные» поля, есть ли способ заставить его срабатывать при потере фокуса любого поля?Это решит проблему наиболее легко.

Редактировать: Я положил alert() на обработчик успеха, и он срабатывает только тогда, когда вы теряете фокус любого поля, котороеподтвержденоСтранная часть заключается в том, что, несмотря на мой метод phone, обработчик успеха срабатывает только тогда, когда вы теряете фокус после ввода действительного номера телефона.Тем не менее, технически, когда поле не отображается и отображается значение по умолчанию, оно также является «действительным» полем, но success не запускается.Другими словами, при отключении поля и потере фокуса класс немедленно изменяется на .valid, но обработчик success никогда не срабатывает.Это то, что меня больше всего смущает, и то, что я ищу объяснения.

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

Подсказка ?: Простое удаление значения поля по умолчанию заставляет его работать ...

jsFiddle # 3: http://jsfiddle.net/BwNLs/

Однако это не совсем то, что я хочу (мне нужны значения полей по умолчанию как часть моего дизайна).Очевидно, что переключение значений полей по умолчанию не является проблемой в jsFiddle # 1 ... это становится проблемой только при представлении qTip2.

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

1 Ответ

3 голосов
/ 30 января 2012

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

1) Обработчик success запускается сразу после потери фокуса поля, котороебыла только проверена с определенным исключением: я думаю, что это проблема синхронизации ... значение по умолчанию возвращается в то время, когда плагин выполняет проверку.

2) Обработчик success запускается одинаково точно в обоих случаях jsFiddle 1 и 2 выше.Разница в том, что сообщения об ошибках в первом тестовом примере переключаются между display:none и display:inline внутри с помощью плагина.Однако во втором тестовом случае пузыри сообщений qTip переключаются с помощью обработчиков errorPlacement: и success:.

3) Классы valid и error переключаются одинаково в обоих случаях.Во втором тестовом случае кажется, что, несмотря на переключение класса с error на valid, это не обязательно означает, что success сработает.Кажется, что, хотя класс valid, возвращение значения по умолчанию в поле каким-то образом предотвращает запуск success.Почему?

Обходной путь (временный?):

Я добавил обработчик onfocusout к .validate следующим образом:

 onfocusout: function(element) {
     $(element).valid();
     $(element).filter('.valid').qtip('destroy');
 },

http://jsfiddle.net/MNKMP/

onfocusout обычно является логическим значением ( в соответствии с документами ), поэтому размещение функции там нарушает нормальную функциональность, когда вы теряете фокус.Мне пришлось вызвать valid() в первой строке, чтобы заменить обычную функциональность onfocusout, которая была потеряна.(я не понимаю, как в документации не упоминается, что вы можете заменить логическое значение на функцию).( РЕДАКТИРОВАТЬ: я взял пик внутри плагина и, несмотря на документы, onfocusout это не логическое значение, это функция. Я заметил довольно много вещей, либо полностью отсутствующих, либо в отличие от официальной документации) 1

Тогда, поскольку я не могу полагаться на обработчик success для стрельбы при потере фокуса, я добавил строку, которая уничтожаетq Подсказка, если класс говорит, что поле имеет значение valid.

Единственное, что мне нужно сделать, это немного изменить нормальное поведение.Обычно, когда вы впервые загружаете страницу, вы можете перемещаться между «обязательными» полями без каких-либо сообщений об ошибках, пока не нажмете кнопку «Отправить», которая затем высветит все пустые обязательные поля.После установки моего обходного пути, просто табуляция в и из пустого поля высвечивает одно сообщение об ошибке.

Мне нравится плагин Validation.Я просто хотел бы, чтобы был надежный способ вручную дублировать любую функциональность по умолчанию.Кажется, что каждый раз, когда я вручную использую метод, возникают загадочные необъяснимые побочные эффекты для других поведений по умолчанию.

Я расширю этот ответ, как позволит время.


РЕДАКТИРОВАТЬ 2:

1 Уточнение onkeyup:, onfocusout: и, возможно, многие другие параметры: Эти параметры по умолчанию имеют значениеtrue ("on") в соответствии с документацией , но они действительно поддерживаются внутренними функциями.Другими словами, вы можете установить эти опции на false в вашей настройке .validate(), но вы не можете установить их на true, не сломав плагин.

...