Cómo validar un formulario con varias casillas de verificación para que se compruebe al menos uno

Estoy intentando validar un formulario usando el complemento validar para jquery. Deseo solicitar que el usuario marque al menos una checkbox en un grupo para que se envíe el formulario. Aquí está mi código jquery:

$().ready(function() { $("#subscribeForm").validate({ rules: { list: {required: "#list0:checked"} }, messages: { list: "Please select at least one newsletter"} }); }); 

y aquí está la forma html:

 
zero
one
two

El problema es que el formulario se envía incluso si no se marca nada. ¿Cómo puedo resolver esto?

¿Esta secuencia de comandos a continuación debería ponerlo en el camino correcto, tal vez?

Puede mantener este html igual (aunque cambié el método a POST):

  
zero
one
two

y este javascript valida

 function onSubmit() { var fields = $("input[name='list']").serializeArray(); if (fields.length === 0) { alert('nothing selected'); // cancel submit return false; } else { alert(fields.length + " items selected"); } } // register event on form, not submit button $('#subscribeForm').submit(onSubmit) 

y puedes encontrar un ejemplo de trabajo aquí

ACTUALIZACIÓN (Oct 2012)
Además, debe tenerse en cuenta que las casillas de verificación deben tener una propiedad de “nombre”, o de lo contrario no se agregarán a la matriz. Solo tener “id” no funcionará.

ACTUALIZACIÓN (mayo de 2013)
Se movió el registro de envío a javascript y se registró el envío en el formulario (como debería haber sido originalmente)

ACTUALIZACIÓN (junio de 2016)
Cambios == a ===

  $('#subscribeForm').validate( { rules: { list: { required: true, minlength: 1 } } }); 

Creo que esto asegurará que al menos uno esté marcado.

Qué tal esto:

 $(document).ready(function() { $('#subscribeForm').submit(function() { var $fields = $(this).find('input[name="list"]:checked'); if (!$fields.length) { alert('You must check at least one box!'); return false; // The form will *not* submit } }); }); 

El addMethod anterior de Lod Lawson no es del todo correcto. Es $ .validator y no $ .validate y el nombre del método de validación cb_selectone requiere comillas. Aquí hay una versión corregida que probé:

 $.validator.addMethod('cb_selectone', function(value,element){ if(element.length>0){ for(var i=0;i 

Aquí está la solución rápida para validación de checkbox múltiple usando el complemento de validación de jquery:

 jQuery.validator.addMethod('atLeastOneChecked', function(value, element) { return ($('.cbgroup input:checked').length > 0); }); $('#subscribeForm').validate({ rules: { list0: { atLeastOneChecked: true } }, messages: { list0: { 'Please check at least one option' } } }); $('.cbgroup input').click(function() { $('#list0').valid(); }); 

Qué tal esto

 $.validate.addMethod(cb_selectone, function(value,element){ if(element.length>0){ for(var i=0;i 

Ahora puedes hacer

 $.validate({rules:{checklist:"cb_selectone"}}); 

Incluso puede ir más allá y especificar el número mínimo para seleccionar con un tercer parámetro en la función de callback. Todavía no lo he probado, así que dígame si funciona.

Buen ejemplo sin métodos de validación personalizados, pero con el complemento de metadatos y algunos html adicionales.

Demo del autor del complemento Jquery.Validate

Tuve que hacer lo mismo y esto es lo que escribí. Lo hice más flexible en mi caso ya que tenía varios grupos de casillas de verificación para verificar.

 // param: reqNum number of checkboxes to select $.fn.checkboxValidate = function(reqNum){ var fields = this.serializeArray(); return (fields.length < reqNum) ? 'invalid' : 'valid'; } 

luego puede pasar esta función para verificar múltiples grupos de casillas con múltiples reglas.

 // helper function to create error function err(msg){ alert("Please select a " + msg + " preference."); } $('#reg').submit(function(e){ //needs at lease 2 checkboxes to be selected if($("input.region, input.music").checkboxValidate(2) == 'invalid'){ err("Region and Music"); } }); 

Tenía un escenario ligeramente diferente. Mis casillas de verificación se crearon en forma dinámica y no eran del mismo grupo. Pero al menos cualquiera de ellos tenía que ser revisado. Mi enfoque (nunca digas que esto es perfecto), creé un validador genérico para todos ellos:

 jQuery.validator.addMethod("validatorName", function(value, element) { if (($('input:checkbox[name=chkBox1]:checked').val() == "Val1") || ($('input:checkbox[name=chkBox2]:checked').val() == "Val2") || ($('input:checkbox[name=chkBox3]:checked').val() == "Val3")) { return true; } else { return false; } }, "Please Select any one value"); 

Ahora tenía que asociar cada uno de los chkbox a este único validador.

Una vez más tuve que activar la validación cuando se hizo clic en cualquiera de las casillas de verificación activando el validador.

 $('#piRequest input:checkbox[name=chkBox1]').click(function(e){ $("#myform").valid(); }); 
 if ( document.forms["form"]["mon"].checked==false && document.forms["form"]["tues"].checked==false && document.forms["form"]["wed"].checked==false && document.forms["form"]["thrs"].checked==false && document.forms["form"]["fri"].checked==false ) { alert("Select at least One Day into Five Days"); return false; }