Dejo un código que permite validar que un radio button fue seleccionado y muestra un mensaje indicando el valor del radio que fue escogido.
La validación se realiza después de presionar el botón.
Si presionamos el botón sin seleccionar una opción nos aparece un mensaje de error.
Al seleccionar una opción nos dirá el valor del radio button que se escogió.
Finalmente les dejo el código.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Validar Radio Button con JQuery</title>
</head>
<body>
<form name="form" id="formulario">
<strong>OPCIONES</strong><br/>
<input type="radio" name="opcion" id="opcion1" value="1">OPCION 1<br/>
<input type="radio" name="opcion" id="opcion2" value="2">OPCION 2<br/>
<input type="radio" name="opcion" id="opcion3" value="3">OPCION 3<br/>
<input type="radio" name="opcion" id="opcion4" value="4">OPCION 4<br/>
<input type="submit" value="PRESIONAR"><br/>
<!--Mostramos los mensajes de error o de selección-->
<div id="error" style="color: red"></div>
<div id="resultado" style="color: green"></div>
</form>necessary for Bootstrap's JavaScript plugin
<!-- Librería jQuery -->
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(document).ready(function() {
$("#formulario").submit(function(event) {
event.preventDefault();
$("#resultado").html("");
$("#error").html("");
radio = $("#formulario").find( "input[name='opcion']:input[type='radio']" );
//Validamos que se seleccione una de las opciones y mostramos cual se seleccionó
if(radio.is(':checked')) {
seleccionada = $("#formulario").find( "input[name='opcion']:checked" ).val();
$("#resultado").html("<b>Se seleccionó la opción"+seleccionada+"</b>");
} else {
$("#error").html("<b>Seleccione una opción</b>");
}
});
});
</script>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Validar Radio Button con JQuery</title>
</head>
<body>
<form name="form" id="formulario">
<strong>OPCIONES</strong><br/>
<input type="radio" name="opcion" id="opcion1" value="1">OPCION 1<br/>
<input type="radio" name="opcion" id="opcion2" value="2">OPCION 2<br/>
<input type="radio" name="opcion" id="opcion3" value="3">OPCION 3<br/>
<input type="radio" name="opcion" id="opcion4" value="4">OPCION 4<br/>
<input type="submit" value="PRESIONAR"><br/>
<!--Mostramos los mensajes de error o de selección-->
<div id="error" style="color: red"></div>
<div id="resultado" style="color: green"></div>
</form>necessary for Bootstrap's JavaScript plugin
<!-- Librería jQuery -->
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(document).ready(function() {
$("#formulario").submit(function(event) {
event.preventDefault();
$("#resultado").html("");
$("#error").html("");
radio = $("#formulario").find( "input[name='opcion']:input[type='radio']" );
//Validamos que se seleccione una de las opciones y mostramos cual se seleccionó
if(radio.is(':checked')) {
seleccionada = $("#formulario").find( "input[name='opcion']:checked" ).val();
$("#resultado").html("<b>Se seleccionó la opción"+seleccionada+"</b>");
} else {
$("#error").html("<b>Seleccione una opción</b>");
}
});
});
</script>
</body>
</html>
No hay comentarios.:
Publicar un comentario