example - jquery validate submithandler

jquery validate marque al menos una casilla de verificación

Question

Tengo algo como esto:

<form>
<input name=''roles'' type=''checkbox'' value=''1'' />
<input name=''roles'' type=''checkbox'' value=''2'' />
<input name=''roles'' type=''checkbox'' value=''3'' />
<input name=''roles'' type=''checkbox'' value=''4'' />
<input name=''roles'' type=''checkbox'' value=''5'' />
<input type=''submit'' value=''submit'' />
<form>

Me gustaría validar que al menos una casilla de verificación (roles) esté marcada, ¿es posible con jquery.validate?

Answer 1

Así es como lo he tratado en el pasado:

$().ready(function() {                                                      
    $("#contact").validate({
        submitHandler: function(form) {
            // see if selectone is even being used
            var boxes = $(''.selectone:checkbox'');
            if(boxes.length > 0) {
                if( $(''.selectone:checkbox:checked'').length < 1) {
                    alert(''Please select at least one checkbox'');
                    boxes[0].focus();
                    return false;
                }
            }
            form.submit();
        }
    }); 

});

Answer 2

Ejemplo de https://github.com/ffmike/jquery-validate

 <label for="spam_email">
     <input type="checkbox" class="checkbox" id="spam_email" value="email" name="spam[]" validate="required:true, minlength:2" /> Spam via E-Mail </label>
 <label for="spam_phone">
     <input type="checkbox" class="checkbox" id="spam_phone" value="phone" name="spam[]" /> Spam via Phone </label>
 <label for="spam_mail">
     <input type="checkbox" class="checkbox" id="spam_mail" value="mail" name="spam[]" /> Spam via Mail </label>
 <label for="spam[]" class="error">Please select at least two types of spam.</label>

Lo mismo sin el campo "validar" en etiquetas solo usando javascript:

$("#testform").validate({ 
    rules: { 
            "spam[]": { 
                    required: true, 
                    minlength: 1 
            } 
    }, 
    messages: { 
            "spam[]": "Please select at least two types of spam."
    } 
}); 

Y si necesita nombres diferentes para las entradas, puede usar algo como esto:

<input type="hidden" name="spam" id="spam"/>
<label for="spam_phone">
    <input type="checkbox" class="checkbox" id="spam_phone" value="phone" name="spam_phone" /> Spam via Phone</label>
<label for="spam_mail">
    <input type="checkbox" class="checkbox" id="spam_mail" value="mail" name="spam_mail" /> Spam via Mail </label>

Javascript:

 $("#testform").validate({ 
    rules: { 
        spam: { 
            required: function (element) {
                var boxes = $(''.checkbox'');
                if (boxes.filter('':checked'').length == 0) {
                    return true;
                }
                return false;
            },
            minlength: 1 
        } 
    }, 
    messages: { 
            spam: "Please select at least two types of spam."
    } 
}); 

He agregado entradas ocultas antes de las entradas y la he configurado como "requerida" si no hay casillas de verificación seleccionadas

Answer 3

El complemento de validación solo validará el elemento actual / enfocado. Por lo tanto, deberá agregar una regla personalizada al validador para validar todas las casillas de verificación. Similar a la respuesta anterior.

$.validator.addMethod("roles", function(value, elem, param) {
   return $(".roles:checkbox:checked").length > 0;
},"You must select at least one!");

Y en el elemento:

<input class=''{roles: true}'' name=''roles'' type=''checkbox'' value=''1'' />

Además, es probable que encuentre la pantalla de mensaje de error, que no es suficiente. Solo se resalta 1 casilla de verificación y solo se muestra 1 mensaje. Si hace clic en otra casilla de verificación separada, que luego devuelve una válida para la segunda casilla de verificación, la original sigue marcada como no válida, y el mensaje de error sigue apareciendo, a pesar de que el formulario es válido. Siempre he recurrido a mostrar y ocultar los errores en este caso. El validador solo se ocupa de no enviar el formulario.

La otra opción que tiene es escribir una función que cambie el valor de una entrada oculta para que sea "válida" al hacer clic en una casilla de verificación y luego adjuntar la regla de validación al elemento oculto. Sin embargo, esto solo se validará en el evento onSubmit, pero mostrará y ocultará los mensajes en los momentos apropiados. Esas son las únicas opciones que puede usar con el complemento de validación.

¡Espero que ayude!

Answer 4

Es muy probable que desee tener un texto junto a la casilla de verificación. En ese caso, puede colocar la casilla de verificación dentro de una etiqueta como hago a continuación:

<label style="width: 150px;"><input type="checkbox" name="damageTypeItems" value="72" aria-required="true" class="error"> All Over</label>
<label style="width: 150px;"><input type="checkbox" name="damageTypeItems" value="73" aria-required="true" class="error"> All Over X2</label>

El problema es que cuando se muestra el mensaje de error, se insertará después de la casilla de verificación pero antes del texto, por lo que es ilegible. Para arreglar eso, cambié la función de colocación de error:

if (element.is(":checkbox")) {
    error.insertAfter(element.parent().parent());
}
else {
    error.insertAfter(element);
}

Depende de su diseño, pero lo que hice fue tener una ubicación de error especial para los controles de casilla de verificación. Obtengo el padre de la casilla de verificación, que es una etiqueta, y luego obtengo el padre de la misma, que es un div en mi caso. De esta manera, el error se coloca debajo de la lista de controles de casilla de verificación.

Answer 5

Mmm primero, sus atributos de identificación deben ser únicos, es probable que su código sea

<form>
<input class=''roles'' name=''roles'' type=''checkbox'' value=''1'' />
<input class=''roles'' name=''roles'' type=''checkbox'' value=''2'' />
<input class=''roles'' name=''roles'' type=''checkbox'' value=''3'' />
<input class=''roles'' name=''roles'' type=''checkbox'' value=''4'' />
<input class=''roles'' name=''roles'' type=''checkbox'' value=''5'' />
<input type=''submit'' value=''submit'' />
</form>

Para su problema:

if($(''.roles:checkbox:checked'').length == 0)
  // no checkbox checked, do something...
else
  // at least one checkbox checked...

PERO, recuerde que la validación de un formulario JavaScript es solo indicativa, todas las validaciones DEBEN realizarse en el lado del servidor.

Answer 6

asegúrese de que el input-name[] esté en comas invertidas en el conjunto de reglas. Me tomó horas para resolver esa parte.

$(''#testform'').validate({
  rules : {
    "name[]": { required: true, minlength: 1 }
  }
});

lea más aquí ... http://docs.jquery.com/Plugins/Valid...ets.2C_dots.29

Answer 7

ya ha publicado una buena respuesta.

Solo quiero señalar que si desea usar nombres diferentes para sus entradas, también puede usar (o simplemente copiar el método) método require_from_group del oficial jQuery Validation additional-methods.js ( enlace a CDN para la versión 1.13.1 ) .

Answer 8

$("#idform").validate({
    rules: {            
        ''roles'': {
            required: true,
        },
    },
    messages: {            
        ''roles'': {
            required: "One Option please",
        },
    }
});