すべてのフィールドの値が複数の部分のフォームになるまで送信ボタンを無効にする

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');       
    }); 
}); 

誰かが私には私は何を理解する助けてもらえ間違っている？キーアップイベントが発生していないようです。

Answer 1

jQueryバリデータを使用する必要があります。それはあなたの人生がずっと楽になります。

jQuery Validation

Answer 2

まず最初に、keyUpイベントは、解雇される心配はありません。 2番目のことは、ラインで重大なエラーがありますif (!$(this).val()) {標準のjavascriptで間違った考えによって引き起こされたこのスペル。それが翻訳されていれば、値が存在するかどうかをテストしたいと思っていました。真実は、価値は常に存在するということです。それはちょうど真の価値です。

my exampleをご覧ください。いくつかの修正の後、あなたが望むようにうまくいきます。