Как проверять заполнение формы на лету?

Question

[massef]

Здравствуйте.
Ситуация следующая, имеется форма с валидацией через плагин jquery validate, вместо кнопки отправки ссылка по клику на которую открывается модальное окно с еще один полем. Соответственно валидация не срабатывает.
Тут нужно проверять поля на лету или можно как то запустить сначала валидацию и если она прошла, то открыть модальное окно? Но тогда возникает вопрос, как запустить валидацию перед открытием окна? Для модалки используется fancybox

Answer 1

[Евгений Петров]

Поля с выбором (select, input[type="radio"], input[type="checkbox"], есть немного и более экзотических) — событие change.
Текстовые поля — событие input.

Вот по этим событиям и запускать валидацию на лету. Клик на ссылке блокируется (preventDefault) или она вообще недоступна (например, disply:none).

Comments

[massef]

Не совсем понял, можете показать на примере? jsfiddle.net/g3gd5z3m/1

[Евгений Петров]

@massef я не стал разбираться с этим плагином досконально, но приблизительно вот так jsfiddle.net/petroveg/g3gd5z3m/3

Обратите внимание на input[type="text"]. В реальности нужно перечислить все текстовые типы, или ввести им класс, а может событие input только с клавиатуры возникает и кроме текстовых полей ему больше негде возникнуть... Не помню.

И вообще, я думал, что перед подключением плагина стоит ознакомиться с его API.

[massef]

Спасибо, я сделал по другому, у плагина оказывается есть встроенный метод .valid() который проверяет прошла ли форма валидацию.

[massef]

$( ".modal-trig" ).click(function() {
if (formConnect.valid() == true) {
initModal.fancybox();
} else {
return false;
};
});

[Евгений Петров]

@massef я его и использую. Только я не только по клику валидирую (что по умолчанию), но и отслеживаю живой ввод текстовых значений.