Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de Javascript

Javascript: lenguaje interactivo para dinamizar la web.

Y ahora tambien aprende a programar en C++ con Aprende Web C++

Manuales para la creación y diseño de páginas web

RSS. Suscribir canal.

Este obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial 4.0 Internacional.

7. Formularios (V)

7.5 Validar botones

Comprobar botones de radio

En los botones de radio el usuario sólo puede elegir una opción de entre un grupo de botones, por lo que lo habitual es comprobar que el usuario ha pulsado realmente alguno de los botones, y no se los ha dejado todos en blanco.

Vamos a tomar el siguiente formulario de ejemplo, éste es su código HTML:

<form name="formulario" action="#" onsubmit="return comprobar()">
  <input type="radio" name="estacion" value="primavera" />Primavera <br/>
  <input type="radio" name="estacion" value="verano" />Verano <br/>
  <input type="radio" name="estacion" value="otoño" />Otoño <br/>
  <input type="radio" name="estacion" value="invierno" />Invierno <br/>
  <input type="submit" />
</form>

Para comprobar los botones radio accedemos al array de los elementos, y creamos un bucle para comprobar si éstos están o no seleccionados. Después mandaremos un mensaje mediante una ventana alert() que diga si se ha elegido algún botón o no.

El código javascript es el siguiente:

function comprobar() {
         var pulsado = false;//variable de comprobación
         var opciones = document.formulario.estacion; //array de elementos
         var elegido = -1; //número del elemento elegido en el array
         for (i=0;i<opciones.length;i++) { //bucle de comprobación
               if (opciones[i].checked == true) {
               pulsado = true 
               elegido = i //número del elemento elegido en el array
               }
             }
         if (pulsado == true) { //mensaje de formulario válido
            miOpcion = opciones[elegido].value
            alert("Has elegido la opción: " + miOpcion + "\n El formulario ha sido enviado.")
            }
         else { //mensaje de formulario no válido.
            alert("no has elegido ninguna opción. \n Elige una opción para que el formulario pueda ser enviado")
            return false //el formulario no se envía.
            }
         }

Los comentarios del código no son necesarios (texto en morado), pero ayudan a aclarar qué es cada trozo de código. Puedes ver cómo funciona el formulario en las siguientes líneas:

Comprobar botones checkbox

Los botones tipo checkbox son independientes unos de otros por lo que unos podrán estár pulsados y otros no. aquí las comprobaciones más habituales son en los botones que son obligatorios, es decir, que se obliga al usuario a tener seleccionado el botón para poder mandar el formulario. Un ejemplo típico es el botón para aceptar las condiciones de un contrato. El código html del botón será:

<form name="formulario2" action="#" onsubmit="return aceptar()">
  <input type="checkbox" name="condiciones" value="aceptado" />
     He leido y acepto las condiciones del contrato <br/><br/>
  <input type="submit" />
</form>

El script de comprobación es parecido al del ejemplo anterior, pero más simple ya que aquí sólo hay un botón para comprobar. Por tanto con una instrucción if veremos si el botón está o no seleccionado, y si no lo está se devuelve el valor false para que el formulario no se envíe.

El codigo javascript será el siguente:

function aceptar() {
         var opcion = document.formulario2.condiciones; //acceso al botón
         if (opcion.checked == true) { //botón seleccionado
            alert("El Formulario ha sido enviado")
            }
         else {  //botón no seleccionado
            alert("El formulario no ha podido enviarse. \n Debe aceptar las condiciones para poder enviar el formulario");
            return false; //el formulario no se envia
            }
         }

Puedes ver como funciona el formulario en las siguientes líneas:

Comprobar listas desplegables

Normalmente en las listas desplegables se suele comprobar que el usuario ha elegido una opción diferente de la que se pone por defecto. Es decir que este campo sea obligatorio. En este caso la opción por defecto se pone siempre en primer lugar y suele ser parecida a :

<option value="elegir">Elige una opción</option>

Veamos por ejemplo la siguiente lista desplegable:

<form action="#" name="formulario3" onsubmit="return elige()">
  <select name="colores" id="colores" >
     <option>Elige un color</option>
     <option>Rojo</option>
     <option>Verde</option>
     <option>Amarilllo</option>
     <option>Azul</option>
  </select><br/><br/>
  <input type="submit" />
</form>

Para comprobar si hay algún elemento seleccionado nos valdremos de la propiedad selectedIndex , la cual indica cual es el numero del array del primer elemento seleccionado. Si no hay ningún elemento seleccionado devuelve como valor null y si el elemento seleccionado es el primero devolverá 0. Por tanto si devuelve cualquiera de estos valores sabremos que no hay ningún elemento seleccionado.

El siguiente código javascript comprueba si se ha seleccionado algún elemento de la lista anterior, y devuelve mensajes diciendo si se ha seleccionado o no, caso de no seleccionarse impide que se envie el formulario.

function elige() {
         var lista = document.getElementById("colores")
         if (lista.selectedIndex == null || lista.selectedIndex == 0) { 
            alert("El formulario no ha sido enviado; \n Debes elegir un color de la lista.")
            return false
            }
         else { 
            alert("El formulario ha sido enviado")
            }		
         }

Puedes comprobar como funciona el formulario en las siguientes lineas:

En estas páginas hemos comprobado los elementos de formulario uno a uno, pero lo normal es que en un formulario haya diferentes elementos de diferentes clases que deban ser comprobados. En ese caso comprobaremos todos en la misma función de la misma manera que lo hemos hecho aqui. Conviene que el valor que se devuelva dentro de los elementos if sea return=false, para que al final, si todo está correcto se pueda enviar el formulario.

Evitar envio duplicado

Un problema bastante habitual en el envio de formularios es que el usuario haga click dos veces en el botón de enviar y éste sea enviado por duplicado. Aunque en la mayoría de los casos no es un problema grave, si puede serlo en el caso de páginas de compras o de transacciones económicas. Podemos controlar esto de varias maneras:

Podemos, por ejemplo mandar al usuario a otra página en cuanto envie el formulario, esto no deshabilita el botón de envio, pero al cambiar de página el usuario ya no puede utilizar el formulario, a menos que cambie a la página anterior.

En esta nueva página lo habitual es avisar de que el formulario se ha enviado, y darle las gracias por rellenarlo. Para cambiar a una nueva página utilizaremos el método de window open(), el cual ya lo vimos en el tema 5.6 Ventanas; esta sentencia debemos ponerla en la función que controla las comprobaciones o validaciones vistas anteriormente, (evento onsubmit), en el caso de que el valor devuelto no sea false.

Sin embargo otra forma de evitar el envio duplicado es deshabilitar efectivamente el botón de envio, para ello, en primer lugar utilizaremos un botón tipo button al que mediante el evento onclick le añadiremos algunas sentencias:

<input type="button" value="Enviar" onclick="this.disabled=true; this.value='Enviando...'; this.form.submit()/>

En el código anterior hemos puesto algunas instrucciones que se ejecutarán al pulsar el botón; estas son:

• this.disabled=true: esta es la instrucción que deshabilita el botón. la propiedad disabled=true indica que el botón debe ser deshabilitado.
• this.value='Enviando...': Cambiamos el texto del botón, por este otro que resulta más apropiado.
• this.form.submit(): Esta es la instrucción que envia el formulario. el método submit() es el que envia el formulario.

Si hubieramos utilizado el botón submit, éste se deshabilita antes de ser enviado el formulario, por lo que no hubieramos podido enviarlo. Esta es la razón de utilizar un botón tipo button.

Este código sirve cuando no hay que validar o comprobar elementos, sin embargo en el caso de que tengamos que comprobar elementos mediante una función, como en los ejemplos anteriores, seguiremos usando un botón tipo button pero el envio y deshabilitación del botón lo haremos desde la propia función, y sólo en los casos que haya que enviar el formulario.

Así en el último ejemplo visto, el de listas desplegables, modificaremos el script de la siguiente manera:

Borramos el botón submit y el evento onsubmit; y en su lugar ponemos el siguiente botón:

<input type="button" value="Enviar" onclick="return elige(this);" />

Luego el código javascript lo modificaremos de la siguiente manera:

function elige(envio) {
         var lista = document.formulario3.colores
         if (lista.selectedIndex == null || lista.selectedIndex == 0) { 
            alert("El formulario no ha sido enviado; \n Debes elegir un color de la lista.")
            }
         else { 
            envio.disabled=true; envio.value='Enviando...'; envio.form.submit()
            }		
         }

En el código hemos eliminado el elemento return ya que el envio o no del formulario se realiza desde la propia función.

El código para envio, deshabilitación y cambio del texto del botón, sólo se ejecutan cuando el elemento está seleccionado, caso contrario, el formulario sigue como estaba.

En las siguientes líneas puedes comprobar como funciona el formulario :

Por supuesto también podemos utilizar los dos métodos vistos aquí a la vez, es decir deshabilitar el botón, y a la vez mandar al usuario hacia otra página.

En el siguiente tema veremos otras estructuras de control en javascript

Otras estructuras.

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com