Te enseñaremos a validar botones de selección en una página web con Javascript

La configuración y validación de los botones de selección parece ser el campo de formulario que ofrece a muchos webmasters la mayor dificultad de configuración. En realidad, la configuración de estos campos es el más simple de todos los campos de formulario para validar como botones de radio que establecen un valor que sólo necesita ser probado cuando se envía el formulario.

 

La dificultad con los botones de opción es que hay por lo menos dos y generalmente más campos que necesitan ser colocados en el formulario, relacionados entre sí y probados como un solo grupo. Siempre que utilice las convenciones de nomenclatura y la disposición correctas para sus botones, no tendrá ningún problema.

Configuración del grupo de botones de selección

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

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

 

<input type="radio" name="group1" id="r1" value="1" />

<input type="radio" name="group1" id="r2" value="2" />

<input type="radio" name="group1" id="r3" value="3" />

 

La creación de múltiples grupos de botones de opción para un formulario también es sencilla. Todo lo que tiene que hacer es proporcionar al segundo grupo de botones de opción un nombre diferente al que se utiliza 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 seleccione en el momento en que se envíe el formulario.

Describa cada botón

Para que la persona que rellene el formulario pueda entender lo que hace cada botón de selección en nuestro grupo, necesitamos proporcionar descripciones para cada botón. La forma más sencilla de hacerlo 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 plano:

 

  1. El texto puede estar asociado visualmente con el botón de radio, pero puede no ser claro para algunos que utilizan lectores de pantalla, por ejemplo.
  2. En la mayoría de las interfaces de usuario que utilizan botones de selección, el texto asociado con el botón es clicable y puede seleccionar su botón de selección asociado. En nuestro caso, el texto no funcionará de esta manera a menos que el texto esté asociado específicamente con el botón.

 

Asociación de texto con un botón de opción

Para asociar el texto con su correspondiente botón de selección de modo que al hacer clic en el texto se seleccione ese botón, necesitamos hacer una adición adicional al código de cada botón rodeando todo el botón y su texto asociado dentro de una etiqueta.

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

 

<input type="radio" name="group1" id="r1" value="1" />

<label for="r1"> button one</label>

 

Como el botón de selección con el nombre del identificador al que se hace referencia en el parámetro for de la etiqueta está realmente contenido dentro de la etiqueta misma, los parámetros for e id son redundantes en algunos navegadores. Hay navegadores, sin embargo, a menudo no son lo suficientemente inteligentes para reconocer el anidamiento, por lo que vale la pena ponerlos para maximizar el número de navegadores en los que el código funcionará.

 

Esto completa la codificación de los propios botones de selección. El paso final es configurar la validación del botón de selección utilizando JavaScript.

Validación de botones de selección de configuración

La validación de grupos de botones de selección puede no ser obvia, pero es sencilla una vez que se sabe cómo hacerlo.

 

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

 

// Radio Button Validation

// copyright Stephen Chapman, 15th Nov 2004,14th Sep 2005

// you may copy this function but please keep the copyright notice with it

function valButton(btn) {

    var cnt = -1;

    for (var i=btn.length-1; i > -1; i--) {

        if (btn[i].checked) {cnt = i; i = -1;}

    }

    if (cnt > -1) return btn[cnt].value;

    else return null;

}

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

 

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

 

var btn = valButton(form.group1);

if (btn == null) alert('No radio button selected');

else alert('Button value ' + btn + ' selected');

 

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

 

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

Todos los grupos de botones de selección que necesitará en algún momento se pueden manejar siguiendo los pasos descritos anteriormente.

(0 votes)