jQueryは複数のフィールドにまたがって検証します

Question

人数を入力する3つの入力フィールドがあり、そのうちのどれが大人で何人が子供であるかが分かります。私はどこ 子供+大人のカスタムメソッドを追加するためのプラグインを検証jQueryのを使用しようとしています=人

の数は、これは私の検証コール

$("#form2").validate({ 
    errorElement: "span", 
     rules: { 
     attendees: { 
      required: true, 
      digits: true 
     },    
     adults: { 
      required: true, 
      digits: true 
     },    
     children: { 
      required: true, 
      digits: true 
     } 
    }, 
    messages: { 
     attendees: "Enter the number of persons (including yourself)", 
     adults: "Enter number of adults", 
     children: "Enter number of childern"     
    }    
}); 

である私は、検証プラグインのグループ機能とaddMetodを見て一つの要素だけを念頭に置いて作られたようだ。何か案は ？

Answer 1

フォローthe documentationカスタムメソッド/ルールを作成します。ここでは、単にそれをtotalCheckと呼んでいますが、名前を付けても構いません。

$.validator.addMethod('totalCheck', function(value, element, params) { 
    var field_1 = $('input[name="' + params[0] + '"]').val(), 
     field_2 = $('input[name="' + params[1] + '"]').val(); 
    return parseInt(value) === parseInt(field_1) + parseInt(field_2); 
}, "Enter the number of persons (including yourself)"); 

他のルールと同様に実装されています。 2つのパラメータは、チェックしたい他の2つのフィールドの属性であるnameです。この新しいルールでは、フィールドには他の2つのフィールドの合計が含まれている必要があるので、requiredとdigitsのルールは冗長になり、削除できます。

$("#form2").validate({ 
    errorElement: "span", 
    rules: { 
     attendees: { 
      totalCheck: ['adults', 'children'] // <-- your custom rule 
     }, 
     adults: { 
      required: true, 
      digits: true 
     }, 
     children: { 
      required: true, 
      digits: true 
     } 
    }, 
    messages: { 
     adults: "Enter number of adults", 
     children: "Enter number of childern" 
    } 
}); 

ワーキングDEMO：http://jsfiddle.net/hBXL6/

Answer 2

これはコメントで示唆されているように、これは良い方法ではありません。それにもかかわらず、あなたはまだそれをしたい場合：

$("#form2").validate({ 
    errorElement: "span", 
     rules: { 
     attendees: { 
      equal: $("#form2 #adults").val() + $("#form2 #children").val(); 
     },    
     adults: { 
      required: true, 
      digits: true 
     },    
     children: { 
      required: true, 
      digits: true 
     } 
    }, 
    messages: { 
     attendees: "Enter the number of persons (including yourself)", 
     adults: "Enter number of adults", 
     children: "Enter number of childern"     
    }    
}); 

Answer 3

スパーキーによって答えは完全ではありません。変更されたときadultsとchildrenは再検証attendeesする必要があります。

が最後にこれを追加します。

$('input[name=adults],input[name=children]').on('change', function(){ 
    $('input[name=attendees]').removeData("previousValue").valid(); 
}); 

注：私はCSでの博士号を保持しますが、私はコメントをまだポイントを持っていない...ので、新しい答えを。