Cómo validar un formulario con múltiples casillas de verificación para que al menos uno marque

Question

Estoy intentando validar un formulario usando el complemento validar para jquery. Deseo solicitar que el usuario marque al menos una casilla de verificación 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á el formulario HTML:

<form action="" method="GET" id="subscribeForm"> 
<fieldset id="cbgroup"> 
    <div><input name="list" id="list0" type="checkbox" value="newsletter0" >zero</div> 
    <div><input name="list" id="list1" type="checkbox" value="newsletter1" >one</div> 
    <div><input name="list" id="list2" type="checkbox" value="newsletter2" >two</div> 
</fieldset> 
<input name="submit" type="submit" value="submit"> 

El problema es que la forma se somete incluso si no hay nada marcado. ¿Cómo puedo resolver esto?

Answer 1

¿El siguiente guión debería ponerlo en el camino correcto?

Puede mantener esta html del mismo (aunque he cambiado el método POST):

<form method="POST" id="subscribeForm"> 
    <fieldset id="cbgroup"> 
     <div><input name="list" id="list0" type="checkbox" value="newsletter0" >zero</div> 
     <div><input name="list" id="list1" type="checkbox" value="newsletter1" >one</div> 
     <div><input name="list" id="list2" type="checkbox" value="newsletter2" >two</div> 
    </fieldset> 
    <input name="submit" type="submit" value="submit"> 
</form> 

y esto 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 se puede encontrar una working example of it here

ACTUALIZACIÓN (Oct 2012)
Además, debe tenerse en cuenta que el chec Los kboxes deben tener una propiedad de "nombre", de lo contrario no se agregarán a la matriz. Solo tener "id" no funcionará.

ACTUALIZACIÓN (mayo de 2013)
se ha llevado el registro someterse a javascript y registró el presentar en la forma (como debería haber sido originalmente)

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

Answer 2

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

Answer 3

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

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

Answer 4

¿Qué tal esto

$.validate.addMethod(cb_selectone, 
        function(value,element){ 
          if(element.length>0){ 
           for(var i=0;i<element.length;i++){ 
           if($(element[i]).val('checked')) return true; 
           } 
          return false; 
          } 
          return false; 
        }, 
        'Please select a least one') 

Ahora que ca hace

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

Usted puede incluso ir más allá de un especificar el número mínimo de seleccionar con un tercer parámetro en los function.I de devolución de llamada no se han probado aún así dime si funciona.

Answer 5

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í es una versión corregida que he probado:

$.validator.addMethod('cb_selectone', function(value,element){ 
    if(element.length>0){ 
     for(var i=0;i<element.length;i++){ 
      if($(element[i]).val('checked')) return true; 
     } 
     return false; 
    } 
    return false; 
}, 'Please select at least one option'); 

Answer 6

Aquí está la solución rápida para la validación de casilla múltiple utilizando la validación de jQuery plugin:

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

Answer 7

buen ejemplo y sin encargo validar métodos, pero con plug-in de metadatos y algunos html extra

Demo from Jquery.Validate plugin author

Answer 8

que tenía que hacer lo mismo y esto es lo que wrote.I hecho que sea más flexible en mi caso, ya que tenía múltiples grupo de casillas de verificación para comprobar.

// 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"); 
    } 
}); 

Answer 9

Tuve un pequeño escenario 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 dicen que este es perfecto), he creado un validador genric 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 éste sólo validador.

De nuevo 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(); 
}); 

Answer 10

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