Не выполняйте jQuery, если все поля формы заполнены

Question

У меня очень большая форма, состоящая из 40 вопросов. Я разделил вопросы на разделы, по 10 в каждом, и каждый из них завернут в div.

Я использую JQuery, чтобы скользить дивы в и из

$('a.nextform').click(function(e){ 
     $('.hold-all').animate({"left": "-=690"}, 500); 
     e.preventDefault(); 
    }) 
$('a.backform').click(function(e){ 
     $('.hold-all').animate({"left": "+=690"}, 500); 
     e.preventDefault(); 
    }) 

Я хочу, чтобы как-то сказать, если requeired поля Havent завершены, то не позволяют пользователю нажмите кнопку Далее, это возможно с JQuery ?

Answer 1

отдавания вводит идентификатор, например <input id='name' type='text'/>

Затем проверьте, если его пустым, используя

$('#name').val()

пример

if($('#name').val() != ''){ 
//do 
} 
else 
{ 
//dont do 
} 

Answer 2

Вы можете установить атрибут отключен = "отключен" на ввод кнопки с помощью JQuery: see w3schools например $(button).attr('disabled', 'disabled'). Вы также можете поместить обработчик на $(form).submit и предотвратитьDefault и вернуть false. Вы также можете сделать return false на ваших обработчиках щелчков выше, чтобы предотвратить выполнение кода клика.

Answer 3

Возможно, вы захотите также разбить валидацию на этапы, т. Е. Не переходить к следующему div до тех пор, пока все входы не будут проверены на текущем div.

Существуют различные плагины для проверки формы для jquery, которые вы можете использовать, вы можете начать с http://docs.jquery.com/Plugins/Validation.

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

$('a.nextform').click(function(e){ 
if ("#myform").valid()) { 
$('.hold-all').animate({"left": "-=690"}, 500); 
    e.preventDefault(); 
} 
} 
... 

Answer 4

Конечно. Итерации через каждое из полей ввода - вы можете сгруппировать их с помощью набора полей и использовать что-то вроде .children ('input, textarea') - проверить каждый из входов и проверить, есть ли значение для данного ввода.

Answer 5

Было бы сумасшество и трудно поддерживать, если вы напишете это вручную для всех полей формы. Добавление или удаление полей в списке скоро затруднит процесс, управление и отслеживание процесса.

Проблема вы сталкиваетесь является общим, а также решаемой одно: «Validation»

http://bassistance.de/jquery-plugins/jquery-plugin-validation/

В основном добавить класс CSS «необходимый» в любой области, которая является обязательной. Вызовите запустить плагин проверки в своей форме или контейнер формы.

Когда пользователь нажимает кнопку Далее вызов $ («# формы вопросов»). Проверить()

Если Validate возвращает истину, вставьте следующий DIV. Если она возвращает ложь нет. Плагин validate также может добавить сообщение проверки в конец поля, которое не провело проверку, и/или предоставить сводное сообщение проверки неудачных ограничений: более подробную информацию см. В документации.

http://jquery.bassistance.de/validate/demo/