jQuery convalida su più campi

Question

Ho 3 campi di input che richiedono il numero di persone e di loro quanti sono gli adulti e quanti sono i bambini. Sto cercando di utilizzare jQuery convalidare plugin per aggiungere un metodo personalizzato in cui bambini + adulti = numero di persone

Questo è il mio invito convalida

$("#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"     
    }    
}); 

ho guardato la funzione di gruppo e addMetod del plugin validate ma sembra che sia stato realizzato solo con un elemento in mente. Qualche idea ?

Answer 1

Seguire the documentation per la creazione di un metodo personalizzato/regola. Qui, lo chiamo semplicemente totalCheck, ma puoi chiamarlo come preferisci.

$.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)"); 

È implementato come qualsiasi altra regola. I due parametri sono gli attributi name degli altri due campi da controllare. Poiché questa nuova regola dice che il campo deve contenere la somma degli altri due campi, le regole required e digits sono ora ridondanti e possono essere rimosse.

$("#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" 
    } 
}); 

lavoro DEMO: http://jsfiddle.net/hBXL6/

Answer 2

Come suggerito nei commenti, questa non è una buona pratica. Tuttavia, se si vuole ancora farlo:

$("#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

La risposta da Sparky non è completa: la necessità adults e children di ri-convalidare attendees quando cambiato.

Append questo alla fine:

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

Nota: anche se in possesso di un dottorato di ricerca in CS, non ho i punti ancora commentare ... da qui una nuova risposta.