html - validacion - validar formulario javascript antes de enviar
Múltiples casillas de verificación por lo menos 1 requerido (5)
Aquí hay un ejemplo usando jquery y su html.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function () {
$(''#checkBtn'').click(function() {
checked = $("input[type=checkbox]:checked").length;
if(!checked) {
alert("You must check at least one checkbox.");
return false;
}
});
});
</script>
<p>Box Set 1</p>
<ul>
<li><input name="BoxSelect[]" type="checkbox" value="Box 1" required><label>Box 1</label></li>
<li><input name="BoxSelect[]" type="checkbox" value="Box 2" required><label>Box 2</label></li>
<li><input name="BoxSelect[]" type="checkbox" value="Box 3" required><label>Box 3</label></li>
<li><input name="BoxSelect[]" type="checkbox" value="Box 4" required><label>Box 4</label></li>
</ul>
<p>Box Set 2</p>
<ul>
<li><input name="BoxSelect[]" type="checkbox" value="Box 5" required><label>Box 5</label></li>
<li><input name="BoxSelect[]" type="checkbox" value="Box 6" required><label>Box 6</label></li>
<li><input name="BoxSelect[]" type="checkbox" value="Box 7" required><label>Box 7</label></li>
<li><input name="BoxSelect[]" type="checkbox" value="Box 8" required><label>Box 8</label></li>
</ul>
<p>Box Set 3</p>
<ul>
<li><input name="BoxSelect[]" type="checkbox" value="Box 9" required><label>Box 9</label></li>
</ul>
<p>Box Set 4</p>
<ul>
<li><input name="BoxSelect[]" type="checkbox" value="Box 10" required><label>Box 10</label></li>
</ul>
<input type="button" value="Test Required" id="checkBtn">
</body>
</html>
Tengo una lista de casillas de verificación múltiples. el usuario puede verificar todo pero al menos es requerido. No estoy seguro de cómo hacer que esto suceda
<p>Box Set 1</p>
<ul>
<li><input name="BoxSelect[]" type="checkbox" value="Box 1" required><label>Box 1</label></li>
<li><input name="BoxSelect[]" type="checkbox" value="Box 2" required><label>Box 2</label></li>
<li><input name="BoxSelect[]" type="checkbox" value="Box 3" required><label>Box 3</label></li>
<li><input name="BoxSelect[]" type="checkbox" value="Box 4" required><label>Box 4</label></li>
</ul>
<p>Box Set 2</p>
<ul>
<li><input name="BoxSelect[]" type="checkbox" value="Box 5" required><label>Box 5</label></li>
<li><input name="BoxSelect[]" type="checkbox" value="Box 6" required><label>Box 6</label></li>
<li><input name="BoxSelect[]" type="checkbox" value="Box 7" required><label>Box 7</label></li>
<li><input name="BoxSelect[]" type="checkbox" value="Box 8" required><label>Box 8</label></li>
</ul>
<p>Box Set 3</p>
<ul>
<li><input name="BoxSelect[]" type="checkbox" value="Box 9" required><label>Box 9</label></li>
</ul>
<p>Box Set 4</p>
<ul>
<li><input name="BoxSelect[]" type="checkbox" value="Box 10" required><label>Box 10</label></li>
</ul>
El problema con la solución aceptada anterior es que no permite la condición "else" en el envío del formulario (si se ha seleccionado una casilla), lo que impide el envío del formulario, al menos cuando lo probé.
Descubrí otra solución que afecta el resultado deseado de manera más completa en mi humilde opinión, aquí
Asegurarse de que al menos una casilla esté marcada
Código de la siguiente manera:
function valthis() {
var checkBoxes = document.getElementsByClassName( ''myCheckBox'' );
var isChecked = false;
for (var i = 0; i < checkBoxes.length; i++) {
if ( checkBoxes[i].checked ) {
isChecked = true;
};
};
if ( isChecked ) {
alert( ''At least one checkbox checked!'' );
} else {
alert( ''Please, check at least one checkbox!'' );
}
}
Ese código y respuesta por Vell
Esto debería tener lo que necesitas, revisa el archivo jsfiddle en la parte inferior:
$(document).ready(function () {
$(''#txt'').val($("input[type=checkbox]:checked").length);
$(''#txt2'').val($("input[type=checkbox]").length);
$(''input[type=checkbox]'').change(function () {
checked = $("input[type=checkbox]:checked").length;
$(''#block'').show();
$(''#block2'').hide();
if (checked > 0) {
$(''#block'').hide();
$(''#block2'').show();
$(''#txt'').val(checked);
}
});
});
Puede hacerlo en un nivel de PHP o en un nivel de Javascript. Si usa Javascript y / o JQuery, puede verificar y validar si todas las casillas están marcadas con un selector ...
Jquery también ofrece varias bibliotecas de validación. Echa un vistazo a: http://jqueryvalidation.org/
El problema con el uso de Javascript para validar es que se puede omitir, por lo que es aconsejable verificar el servidor también.
Ejemplo usando PHP y asumiendo que usted está llamando a un PO
<?php
if( $_GET["BoxSelect"] )
{
//Process your form here
// Save to database, send email, redirect...
} else {
// Return an error and do not anything
echo "Checkbox is missing";
exit();
}
?>
Usando esto, puede marcar al menos una casilla de verificación seleccionada o no en diferentes grupos de casillas de verificación o en múltiples casillas de verificación.
Referencia: Link
<label class="control-label col-sm-4">Check Box 1</label>
<input type="checkbox" name="checkbox1" id="checkbox1" value=Male /> Male<br />
<input type="checkbox" name="checkbox1" id="checkbox1" value=Female /> Female<br />
<label class="control-label col-sm-4">Check Box 2</label>
<input type="checkbox" name="checkbox2" id="checkbox2" value=ck1 /> ck1<br />
<input type="checkbox" name="checkbox2" id="checkbox2" value=ck2 /> ck2<br />
<label class="control-label col-sm-4">Check Box 3</label>
<input type="checkbox" name="checkbox3" id="checkbox3" value=ck3 /> ck3<br />
<input type="checkbox" name="checkbox3" id="checkbox3" value=ck4 /> ck4<br />
<script>
function checkFormData() {
if (!$(''input[name=checkbox1]:checked'').length > 0) {
document.getElementById("errMessage").innerHTML = "Check Box 1 can not be null";
return false;
}
if (!$(''input[name=checkbox2]:checked'').length > 0) {
document.getElementById("errMessage").innerHTML = "Check Box 2 can not be null";
return false;
}
if (!$(''input[name=checkbox3]:checked'').length > 0) {
document.getElementById("errMessage").innerHTML = "Check Box 3 can not be null";
return false;
}
alert("Success");
return true;
}
</script>