tipos - radio button html ejemplo
Validación de casillas de verificación en HTML (5)
Tengo un formulario, hay 4 opciones (pueden ser casillas de verificación o radio).
Quiero seleccionar múltiples opciones pero una es obligatoria.
Sé que es posible en JS / jQuery pero quiero una solución base HTML / CSS.
Luego de la respuesta de @Rick Hitchcock, creo que querrá mostrarle al usuario el botón de envío, pero se desactivará hasta que se marque una de las casillas de verificación.
Si es así, puede usar pointer-events (en todos los navegadores modernos: http://caniuse.com/#feat=pointer-events ) de esta manera:
input[type="Submit"] {
opacity:0.5;
pointer-events:none;
/* animation added for fancy ;) */
transition:all .2s ease;
}
input:checked ~ .button-wrapper input[type="Submit"] {
opacity:1;
pointer-events:all;
}
.button-wrapper {
position:relative;
display:inline-block;
}
.button-wrapper:before {
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:1;
}
input:checked ~ .button-wrapper:before {
display:none;
}
<input id="c1" type="checkbox"><label for="c1">First</label><br>
<input id="c2" type="checkbox"><label for="c2">Second</label><br>
<input id="c3" type="checkbox"><label for="c3">Third</label><br>
<input id="c4" type="checkbox"><label for="c4">Fourth</label><br>
<div class="button-wrapper">
<input type="Submit" tabindex="-1">
</div>
Editar Se agregó una "máscara" en .button-wrapper:before que funcione en los navegadores antiguos.
Para poder verificar múltiples entradas, deben ser casillas de verificación. ( Podrían ser botones de radio con nombres diferentes, pero no podrá desmarcarlos una vez que los haya seleccionado).
Por lo tanto, use las casillas de verificación y muestre el botón Enviar solo si se marca alguno, usando el selector general de hermanos (~):
input[type="Submit"] {
display: none;
}
input:checked ~ input[type="Submit"] {
display: inline;
}
<input id="c1" type="checkbox"><label for="c1">First</label><br>
<input id="c2" type="checkbox"><label for="c2">Second</label><br>
<input id="c3" type="checkbox"><label for="c3">Third</label><br>
<input id="c4" type="checkbox"><label for="c4">Fourth</label><br>
<input type="Submit">
Cuando no se hace clic en ninguna entrada, muestra solo el botón de envío deshabilitado. Cuando se hace clic en una o más entradas, muestra solo el botón de envío habilitado:
input[type="Submit"]:not([disabled]) {
display: none;
}
input:checked ~ input[type="Submit"]:not([disabled]) {
display: inline;
}
input:checked ~ input[disabled] {
display: none;
}
<input id="c1" type="checkbox"><label for="c1">First</label><br>
<input id="c2" type="checkbox"><label for="c2">Second</label><br>
<input id="c3" type="checkbox"><label for="c3">Third</label><br>
<input id="c4" type="checkbox"><label for="c4">Fourth</label><br>
<input type="Submit" disabled>
<input type="Submit">
Prueba esto:
<input id="c3" type="checkbox" required><label for="c3">Third</label><br>
<input id="c4" type="checkbox" required><label for="c4">Fourth</label><br>
O puedes intentar esto usando jquery para validar una casilla de verificación html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Makes "field" always required. Nothing and blanks are invalid. </title>
<link rel="stylesheet" href="http://jqueryvalidation.org/files/demo/site-demos.css">
</head>
<body>
<form id="myform">
<label for="field">Required: </label>
<input type="text" class="left" id="field" name="field">
<br/>
<input type="submit" value="Validate!">
</form>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://jqueryvalidation.org/files/dist/jquery.validate.min.js"> </script>
<script src="http://jqueryvalidation.org/files/dist/additional- methods.min.js"></script>
<script>
// just for the demos, avoids form submit
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});
$( "#myform" ).validate({
rules: {
field: {
required: true
}
}
});
</script>
</body>
</html>
required es la forma en que html valida las cosas
Puede utilizar lo siguiente para el que es obligatorio.
<input type="radio" name="name" required>
El que no se requiera no se probará si está marcado o no.
Puedes hacer esto en html5 usando el atributo required Like
<input type="checkbox" required name="your_checkbox_name">
Esto le indica al navegador que el formulario no debe enviarse sin que se marque la casilla de verificación. Aunque recomiendo java-script ya que no todos los navegadores podrán reconocerlo.
O
Si desea detectar si al menos una casilla de verificación está seleccionada como lo sugiere @RickHitchcock en los comentarios , puede usar
span {
display: inline;
color: red;
}
input[type="Submit"],
input:checked ~ span {
display: none;
}
input:checked ~ input[type="Submit"] {
display: inline;
}
<form action="#" method="post">
<input type="checkbox" />Checkbox 1
<br />
<input type="checkbox" />Checkbox 1
<br />
<input type="checkbox" />Checkbox 1
<br />
<input type="submit" value="Submit" /><span>! Please check at least one checkbox</span>
</form>