Отключение кнопки отправки, пока все поля не будут иметь значения в многочастной форме

Question

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

Пока что я играл с несколькими вариантами, ни один из которых не действует на 100%

HTML:

<div id="set1">
  <fieldset>
  <div>
    <label>field 1</label>
    <input name="f1" type="text" /><br />
    <span class="error"></span>
  </div>
  <div>
    <label>field 2</label>
    <input name="f2" type="text" /><br />
  </div>
  </fieldset>
</div>
<div id="set2">
  <fieldset>
  <div>
    <label>field 3</label>
    <input name="f3" type="text" /><br />
    <span class="error"></span>
  </div>
  .
  .
  .
  </fieldset>
</div>

jQuery:

$input = $('fieldset:visible div:has(span[class="error"]) input');
$next = $('fieldset:visible .button');
$input.keyup(function() {
  $input.each(function() {
    var trigger = false;
    $input.each(function() {
      if (!$(this).val()) {
        trigger = true;
      }
    });
    trigger ? $next.attr('class', 'disable') : $next.removeAttr('class');                           
  });
});

Может ли кто-нибудь помочь мне понять, что я делаю неправильно?Похоже, событие keyup не запускается.

Answer 1

Во-первых, событие keyup будет запущено, не волнуйтесь.Во-вторых, в строке if (!$(this).val()) { есть серьезная ошибка. Это написание вызвано неправильным мышлением в стандартном javascript.В переводе на это вы хотели проверить, существует ли значение или нет.Правда в том, что ценность существует всегда.Это просто "" или реальное значение.

Посмотрите на мой пример .Надеюсь, после некоторых исправлений все работает так, как вы хотели.

Answer 2

Вы должны использовать валидатор jQuery. Это сделает вашу жизнь намного проще:

Проверка jQuery