Configuración y validación de botones de radio

La configuración y validación de botones de radio parece ser el campo de formulario eso les da a muchos webmasters la mayor dificultad en la configuración. De hecho, la configuración de estos campos es la más simple de todos los campos de formulario para validar, ya que los botones de opción configuran un valor que solo necesita probarse cuando se envía el formulario.

La dificultad con los botones de radio es que hay al menos dos y generalmente más campos que deben colocarse en el formulario, relacionados entre sí y probados como un solo grupo. Siempre que use las convenciones de nombres y el diseño correctos para sus botones, no tendrá ningún problema.

Lo primero que hay que tener en cuenta cuando se usan botones de radio en nuestro formulario es cómo deben codificarse los botones para que funcionen correctamente como botones de radio. El comportamiento deseado que queremos es tener solo un botón seleccionado a la vez; cuando se selecciona un botón, cualquier botón seleccionado previamente se deseleccionará automáticamente.

La solución aquí es dar a todos los botones de radio dentro del grupo el mismo nombre pero valores diferentes. Aquí está el código utilizado para el botón de radio en sí.

La creación de múltiples grupos de botones de opción para la forma única también es sencilla. Todo lo que necesita hacer es proporcionar al segundo grupo de botones de opción un nombre diferente al utilizado para el primer grupo.

El campo de nombre determina a qué grupo pertenece un botón en particular. El valor que se pasará para un grupo específico cuando se envíe el formulario será el valor del botón dentro del grupo que se selecciona en el momento en que se envía el formulario.

Para que la persona que completa el formulario entienda lo que hace cada botón de radio en nuestro grupo, necesitamos proporcionar descripciones para cada botón. La forma más sencilla de hacer esto es proporcionar una descripción como texto inmediatamente después del botón.

Sin embargo, hay un par de problemas con el uso de texto sin formato:

1. El texto puede estar visualmente asociado con el botón de opción, pero puede que no sea claro para algunos que usan lectores de pantalla, por ejemplo.
2. En la mayoría interfaces de usuario Con los botones de opción, se puede hacer clic en el texto asociado con el botón y puede seleccionar su botón de opción asociado. En nuestro caso aquí, el texto no funcionará de esta manera a menos que el texto esté asociado específicamente con el botón.

Para asociar el texto con su botón de opción correspondiente de modo que al hacer clic en el texto se seleccione ese botón, necesitamos agregue más al código para cada botón rodeando todo el botón y su texto asociado dentro de un etiqueta.

Así es como se vería el HTML completo para uno de los botones:

 botón uno

Como el botón de radio con el nombre de identificación mencionado en el para El parámetro de la etiqueta etiqueta está realmente contenido dentro de la etiqueta misma, el para y carné de identidad Los parámetros son redundantes en algunos navegadores. Sin embargo, sus navegadores a menudo no son lo suficientemente inteligentes como para reconocer el anidamiento, por lo que vale la pena colocarlos para maximizar la cantidad de navegadores en los que funcionará el código.

Eso completa la codificación de los botones de radio. El último paso es configurar la validación del botón de radio usando JavaScript.

La validación de grupos de botones de radio puede no ser obvia, pero es sencillo una vez que sabe cómo.

La siguiente función validará que se haya seleccionado uno de los botones de radio de un grupo:

// Validación de botón de radio
// copyright Stephen Chapman, 15 de noviembre de 2004, 14 de septiembre de 2005
// puedes copiar esta función pero por favor guarda el aviso de copyright
función valButton (btn) {
var cnt = -1;
para (var i = btn.length-1; i> -1; yo--) {
if (btn [i] .checked) {cnt = i; i = -1;}
}
if (cnt> -1) devuelve btn [cnt] .value;
de lo contrario, devuelve nulo;
}

Para usar la función anterior, llámela desde la rutina de validación de su formulario y pásele el nombre del grupo de botones de opción. Devolverá el valor del botón dentro del grupo seleccionado, o devolverá un valor nulo si no se selecciona ningún botón en el grupo.

Por ejemplo, aquí está el código que realizará la validación del botón de opción:

var btn = valButton (form.group1);
alerta if (btn == null) ('No se ha seleccionado ningún botón de radio');
alerta de otra cosa ('Valor del botón' + btn + 'seleccionado');

Este código fue incluido en la función llamada por un al hacer clic evento adjunto al botón validar (o enviar) en el formulario.

Se pasó una referencia al formulario completo como parámetro a la función, que utiliza el argumento "formulario" para referirse al formulario completo. Para validar el grupo de botones con el nombre group1, por lo tanto, pasamos form.group1 a la función valButton.

Todos los grupos de botones de radio que necesitará pueden manejarse siguiendo los pasos descritos anteriormente.