El Objeto Radio

El objeto radio
Por Lola Crdenas y Joaquin Gracia. rinconprog.metropoli2000.com Al contrario que con los checkbox, que nos permiten elegir varias posibilidades entre las dadas, los objetos radio slo nos permiten elegir una de entre todas las que hay. Estn pensados para posibilidades mtuamente excluyentes (no se puede ser a la vez mayor de 18 aos y menor de 18 aos, no se puede estar a la vez soltero y casado, etc.).
Propiedades

checked. Valor booleano que nos dice si el radio est seleccionado o no. defaultChecked. Valor booleano que nos dice si el radio debe estar seleccionado por defecto o no. length. Valor numrico que nos dice el nmero de opciones dentro de un grupo de elementos radio. name. Es una cadena que contiene el valor del parmetro NAME. value. Es una cadena que contiene el valor del parmetro VALUE.
Hay que recordar que para agrupar elementos de tipo radio, todos ellos deben tener el mismo valor en NAME.
Mtodos
Realiza la accin de pulsado del botn.  <HTML> <HEAD> <title>Ejemplo de JavaScript</title> </HEAD> <script LANGUAGE="JavaScript"> <!-function Mostrar(boton) { msg="Elementos:"+formulario.edad.length+"\n"; msg+="Menor de 18 aos:"+formulario.edad[0].checked+"\n"; msg+="Entre 18 y 60 aos:"+formulario.edad[1].checked+"\n"; msg+="Mayor de 60 aos:"+formulario.edad[2].checked+"\n"; alert(msg); } //--> </script> <BODY> <form action="procesa.phtml" name="formulario" id="formulario" method="GET">
Edad:<br> <input type="radio" name="edad" value="<18"> Menor de 18 aos.<br> <input type="radio" name="edad" value=">18 y <60" checked> Entre 18 y 60 aos.<br> <input type="radio" name="edad" value=">60"> Mayor de 60 aos.<br> </form> <A href="javascript:Mostrar()">Ver valores</A> </BODY> </HTML>
Objeto Radio Botn : La siguiente sintasis podr tomar el objeto Radio Button en javascript Sintasis: document.formname.radioname Cdigo Ejemplo: <form name=testform> <input name=rb1 value=test type=radio> <input name=rb2 value=test2 type=radio> </form> <script language="javascript"> var rbobject= document.testform.rb1; </script>
El objeto cbobject es un array de un radio elements. Para usar el primer radio button, tenemos que llamar a un rbobject[0], para el segundo box ser rbobject[1] y as sucesivamente. Aqu los eventos, propiedades y mtodos asociados con los elemetos del Radio Button. Captadores de Eventos: Asociado con Form type Radio Button: Todos los ejemplos debajo usan una funcin javascript output <script language=javascript> function output() { alert("testeando eventos Radio Boton"); } </script>
acontecimiento Descripcin Ejemplo onMouseOver Esta se invoca cuando el ratn se mueve sobre el botn de radio <input type=radio onMouseOver="output()"> Resulta: CB1 onMouseDown Esta se invoca cuando el ratn se pulsa sobre el RadioButton <input type=radio onMouseDown="output()"> Resulta: CB1 onMouseUp Esta se invoca cuando el ratn se pulsa en la radio y puestos en libertad <input type=radio onMouseUp="output()"> Resulta: CB1 onClick Esta se invoca cuando un clic del ratn se realiza en la radio <input type=radio onClick="output()"> Resulta: CB1 onBlur Ejecuta cdigo cuando el Botn de Radio pierde foco usando lengeta <input type=radio onBlur="output()"> Resulta: CB1 onFocus Ejecuta cdigo cuando el botn recibe el foco usando lengeta <input type=radio onFocus="output()"> Resulta: CB1
DOM Propiedades: : Listado de Propiedades DOM (Dinmico Objeto Modelo) que pueden ser usados para tomar y alterar RadioButton propiedades en javascript. Ejemplo basado en el formulario (forma) <form name=testrb> <input name=myrb1 type=radio value=xxx> Chequeando 1 <input name=myrb2 type=radio value=xxx> Chequeando 2 </form> DOM Propiedades Descripcin Ejemplo checked Se utiliza para comprobar o seleccione RadioButton seleccin To Check: var ss = document.testb.myrb[0].checked; To Select: document.testb.myrb[1].checked = true; This will select second element. defaultChecked Se utiliza para comprobar si es el botn de radio marcada por defecto To Get: var ss = document.testb.myrb[0].defaultChecked; form Utilizado para conseguir el nodo del padre (objeto de la forma) de este RadioButton To Get: var ss = document.testb.myrb[0].form; name Utilizado para conseguir nombre del botn de radio To Get: var ss = document.testb.myrb[0].name;
type Utilizado para conseguir el tipo de forma To Get: var ss = document.testb.myrb[0].type; value Utilizado para fijar o para conseguir el valor de RadioButton To Get: var ss = document.testb.myrb[0].value; To Set:: document.testb.myrb[0].value = "testy";
DOM Mtodos: Listado de Mtodos DOM (Dinmico Objeto Modelo) que pueden ser utilizados para efectuar cambios dinmicos en la seleccin del usando javascript. DOM Mtodo Descripcin Ejemplo click() Utilizado para hacer dinmicamente un botn de radio comprob To Click: document.testb.myrb.click(); blur() Utilizado para hacer dinmicamente la falta de definicin del botn de radio To Blur: document.testb.myrb.blur(); focus() Utilizado para conseguir dinmicamente el foco en el botn de radio To Focus: document.testb.myrb.focus(); Ejemplo: Realizando un Radio Button Seleccionando on Mouse Over
<script language=javascript> function rbevent() { var xx = document.xx.rbtest; xx.checked = true; } </script> <form name=xx> <input type=radio name=rbtest onMouseOver="rbevent()"> Chequeando </form> Resulta: Chequeando
7.2. Utilidades bsicas para formularios

7.2.1. Obtener el valor de los campos de formulario
La mayora de tcnicas JavaScript relacionadas con los formularios requieren leer y/o modificar el valor de los campos del formulario. Por tanto, a continuacin se muestra cmo obtener el valor de los campos de formulario ms utilizados.
7.2.1.1. Cuadro de texto y textarea
El valor del texto mostrado por estos elementos se obtiene y se establece directamente mediante la propiedad value.
<input type="text" id="texto" /> var valor = document.getElementById("texto").value; <textarea id="parrafo"></textarea> var valor = document.getElementById("parrafo").value;
7.2.1.2. Radiobutton
Cuando se dispone de un grupo de radiobuttons, generalmente no se quiere obtener el valor del atributo value de alguno de ellos, sino que lo importante es conocer cul de todos los radiobuttons se ha seleccionado. La propiedad checked devuelve true para el radiobutton seleccionado y false en cualquier otro caso. Si por ejemplo se dispone del siguiente grupo de radiobuttons:
<input type="radio" value="si" name="pregunta" id="pregunta_si"/> SI <input type="radio" value="no" name="pregunta" id="pregunta_no"/> NO <input type="radio" value="nsnc" name="pregunta" id="pregunta_nsnc"/> NS/NC
El siguiente cdigo permite determinar si cada radiobutton ha sido seleccionado o no:

var elementos = document.getElementsByName("pregunta"); for(var i=0; i<elementos.length; i++) { alert(" Elemento: " + elementos[i].value + "\n Seleccionado: " + elementos[i].checked); }
7.2.1.3. Checkbox
Los elementos de tipo checkbox son muy similares a los radiobutton, salvo que en este caso se debe comprobar cada checkbox de forma independiente del resto. El motivo es que los grupos de radiobutton son mutuamente excluyentes y slo se puede seleccionar uno de ellos cada vez. Por su parte, los checkbox se pueden seleccionar de forma independiente respecto de los dems. Si se dispone de los siguientes checkbox:
<input type="checkbox" value="condiciones" name="condiciones" id="condiciones"/> He ledo y acepto las condiciones <input type="checkbox" value="privacidad" name="privacidad" id="privacidad"/> He ledo la poltica de privacidad
Utilizando la propiedad checked, es posible comprobar si cada checkbox ha sido seleccionado:

var elemento = document.getElementById("condiciones"); alert(" Elemento: " + elemento.value + "\n Seleccionado: " + elemento.checked); elemento = document.getElementById("privacidad"); alert(" Elemento: " + elemento.value + "\n Seleccionado: " + elemento.checked);
7.2.1.4. Select
Las listas desplegables (<select>) son los elementos en los que es ms difcil obtener su valor. Si se dispone de una lista desplegable como la siguiente:
<select id="opciones" name="opciones"> <option value="1">Primer valor</option> <option value="2">Segundo valor</option> <option value="3">Tercer valor</option> <option value="4">Cuarto valor</option> </select>
En general, lo que se requiere es obtener el valor del atributo value de la opcin (<option>) seleccionada por el usuario. Obtener este valor no es sencillo, ya que se deben realizar una serie de pasos. Adems, para obtener el valor seleccionado, deben utilizarse las siguientes propiedades:
options, es un array creado automticamente por el navegador para cada lista
desplegable y que contiene la referencia a todas las opciones de esa lista. De esta forma, la primera opcin de una lista se puede obtener mediante document.getElementById("id_de_la_lista").options[0]. selectedIndex, cuando el usuario selecciona una opcin, el navegador actualiza automticamente el valor de esta propiedad, que guarda el ndice de la opcin seleccionada. El ndice hace referencia al array options creado automticamente por el navegador para cada lista.
// Obtener la referencia a la lista var lista = document.getElementById("opciones"); // Obtener el ndice de la opcin que se ha seleccionado var indiceSeleccionado = lista.selectedIndex; // Con el ndice y el array "options", obtener la opcin seleccionada var opcionSeleccionada = lista.options[indiceSeleccionado]; // Obtener el valor y el texto de la opcin seleccionada var textoSeleccionado = opcionSeleccionada.text; var valorSeleccionado = opcionSeleccionada.value; alert("Opcin seleccionada: " + textoSeleccionado + "\n Valor de la opcin: " + valorSeleccionado);
Como se ha visto, para obtener el valor del atributo value correspondiente a la opcin seleccionada por el usuario, es necesario realizar varios pasos. No obstante, normalmente se abrevian todos los pasos necesarios en una nica instruccin:
var lista = document.getElementById("opciones"); // Obtener el valor de la opcin seleccionada var valorSeleccionado = lista.options[lista.selectedIndex].value; // Obtener el texto que muestra la opcin seleccionada var valorSeleccionado = lista.options[lista.selectedIndex].text;
Lo ms importante es no confundir el valor de la propiedad selectedIndex con el valor correspondiente a la propiedad value de la opcin seleccionada. En el ejemplo anterior, la primera opcin tiene un value igual a 1. Sin embargo, si se selecciona esta opcin, el valor de selectedIndex ser 0, ya que es la primera opcin del array options (y los arrays empiezan a contar los elementos en el nmero 0).
7.2.2. Establecer el foco en un elemento

En programacin, cuando un elemento est seleccionado y se puede escribir directamente en el o se puede modificar alguna de sus propiedades, se dice que tiene el foco del programa. Si un cuadro de texto de un formulario tiene el foco, el usuario puede escribir directamente en el sin necesidad de pinchar previamente con el ratn en el interior del cuadro. Igualmente, si una lista desplegable tiene el foco, el usuario puede seleccionar una opcin directamente subiendo y bajando con las flechas del teclado. Al pulsar repetidamente la tecla TABULADOR sobre una pgina web, los diferentes elementos (enlaces, imgenes, campos de formulario, etc.) van obteniendo el foco del navegador (el elemento seleccionado cada vez suele mostrar un pequeo borde punteado). Si en una pgina web el formulario es el elemento ms importante, como por ejemplo en una pgina de bsqueda o en una pgina con un formulario para registrarse, se considera una buena prctica de usabilidad el asignar automticamente el foco al primer elemento del formulario cuando se carga la pgina. Para asignar el foco a un elemento de XHTML, se utiliza la funcin focus(). El siguiente ejemplo asigna el foco a un elemento de formulario cuyo atributo id es igual a primero:
document.getElementById("primero").focus(); <form id="formulario" action="#"> <input type="text" id="primero" /> </form>
Ampliando el ejemplo anterior, se puede asignar automticamente el foco del programa al primer elemento del primer formulario de la pgina, independientemente del id del formulario y de los elementos:
if(document.forms.length > 0) { if(document.forms[0].elements.length > 0) { document.forms[0].elements[0].focus(); } }
El cdigo anterior comprueba que existe al menos un formulario en la pgina mediante el tamao del array forms. Si su tamao es mayor que 0, se utiliza este primer formulario. Empleando la misma tcnica, se comprueba que el formulario tenga al menos un elemento (if(document.forms[0].elements.length > 0)). En caso afirmativo, se establece el foco del navegador en el primer elemento del primer formulario (document.forms[0].elements[0].focus();). Para que el ejemplo anterior sea completamente correcto, se debe aadir una comprobacin adicional. El campo de formulario que se selecciona no debera ser de tipo hidden:
if(document.forms.length > 0) { for(var i=0; i < document.forms[0].elements.length; i++) { var campo = document.forms[0].elements[i]; if(campo.type != "hidden") { campo.focus(); break; } } }
7.2.3. Evitar el envo duplicado de un formulario

Uno de los problemas habituales con el uso de formularios web es la posibilidad de que el usuario pulse dos veces seguidas sobre el botn "Enviar". Si la conexin del usuario es demasiado lenta o la respuesta del servidor se hace esperar, el formulario original sigue mostrndose en el navegador y por ese motivo, el usuario tiene la tentacin de volver a pinchar sobre el botn de "Enviar". En la mayora de los casos, el problema no es grave e incluso es posible controlarlo en el servidor, pero puede complicarse en formularios de aplicaciones importantes como las que implican transacciones econmicas. Por este motivo, una buena prctica en el diseo de aplicaciones web suele ser la de deshabilitar el botn de envo despus de la primera pulsacin. El siguiente ejemplo muestra el cdigo necesario:
<form id="formulario" action="#"> ... <input type="button" value="Enviar" onclick="this.disabled=true; this.value=Enviando...; this.form.submit()" /> </form>
Cuando se pulsa sobre el botn de envo del formulario, se produce el evento onclick sobre el botn y por tanto, se ejecutan las instrucciones JavaScript contenidas en el atributo onclick:
1. En primer lugar, se deshabilita el botn mediante la instruccin this.disabled = true;. Esta es la nica instruccin necesaria si slo se quiere deshabilitar un botn. 2. A continuacin, se cambia el mensaje que muestra el botn. Del original "Enviar" se pasa al ms adecuado "Enviando..." 3. Por ltimo, se enva el formulario mediante la funcin submit() en la siguiente instruccin: this.form.submit()
El botn del ejemplo anterior est definido mediante un botn de tipo <input type="button" />, ya que el cdigo JavaScript mostrado no funciona correctamente con un botn de tipo <input type="submit" />. Si se utiliza un botn de tipo submit, el botn se deshabilita antes de enviar el formulario y por tanto el formulario acaba sin enviarse.
7.2.4. Limitar el tamao de caracteres de un textarea

La carencia ms importante de los campos de formulario de tipo textarea es la imposibilidad de limitar el mximo nmero de caracteres que se pueden introducir, de forma similar al atributo maxlength de los cuadros de texto normales. JavaScript permite aadir esta caracterstica de forma muy sencilla. En primer lugar, hay que recordar que con algunos eventos (como onkeypress, onclick y onsubmit) se puede evitar su comportamiento normal si se devuelve el valor false. Evitar el comportamiento normal equivale a modificar completamente el comportamiento habitual del evento. Si por ejemplo se devuelve el valor false en el evento onkeypress, la tecla pulsada por el usuario no se tiene en cuenta. Si se devuelve false en el evento onclick de un elemento como un enlace, el navegador no carga la pgina indicada por el enlace. Si un evento devuelve el valor true, su comportamiento es el habitual:
<textarea onkeypress="return true;"></textarea>
En el textarea del ejemplo anterior, el usuario puede escribir cualquier carcter, ya que el evento onkeypress devuelve true y por tanto, su comportamiento es el normal y la tecla pulsada se transforma en un carcter dentro del textarea. Sin embargo, en el siguiente ejemplo:
<textarea onkeypress="return false;"></textarea>
Como el valor devuelto por el evento onkeypress es igual a false, el navegador no ejecuta el comportamiento por defecto del evento, es decir, la tecla presionada no se transforma en ningn carcter dentro del textarea. No importa las veces que se pulsen las teclas y no importa la tecla pulsada, ese textarea no permitir escribir ningn carcter. Aprovechando esta caracterstica, es sencillo limitar el nmero de caracteres que se pueden escribir en un elemento de tipo textarea: se comprueba si se ha llegado al mximo nmero de caracteres permitido y en caso afirmativo se evita el
comportamiento habitual del evento y por tanto, los caracteres adicionales no se aaden al textarea:
function limita(maximoCaracteres) { var elemento = document.getElementById("texto"); if(elemento.value.length >= maximoCaracteres ) { return false; } else { return true; } } <textarea id="texto" onkeypress="return limita(100);"></textarea>
En el ejemplo anterior, con cada tecla pulsada se compara el nmero total de caracteres del textarea con el mximo nmero de caracteres permitido. Si el nmero de caracteres es igual o mayor que el lmite, se devuelve el valor false y por tanto, se evita el comportamiento por defecto de onkeypress y la tecla no se aade. Ejercicio 17 Mejorar el ejemplo anterior indicando en todo momento al usuario el nmero de caracteres que an puede escribir. Adems, se debe permitir pulsar las teclas Backspace, Supr. y las flechas horizontales cuando se haya llegado al mximo nmero de caracteres. Ver solucin
7.2.5. Restringir los caracteres permitidos en un cuadro de texto

En ocasiones, puede ser til bloquear algunos caracteres determinados en un cuadro de texto. Si por ejemplo un cuadro de texto espera que se introduzca un nmero, puede ser interesante no permitir al usuario introducir ningn carcter que no sea numrico. Igualmente, en algunos casos puede ser til impedir que el usuario introduzca nmeros en un cuadro de texto. Utilizando el evento onkeypress y unas cuantas sentencias JavaScript, el problema se resuelve fcilmente:
function permite(elEvento, permitidos) { // Variables que definen los caracteres permitidos var numeros = "0123456789"; var caracteres = " abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"; var numeros_caracteres = numeros + caracteres; var teclas_especiales = [8, 37, 39, 46]; // 8 = BackSpace, 46 = Supr, 37 = flecha izquierda, 39 = flecha derecha // Seleccionar los caracteres a partir del parmetro de la funcin switch(permitidos) { case 'num': permitidos = numeros; break;
case 'car': permitidos = caracteres; break; case 'num_car': permitidos = numeros_caracteres; break; } // Obtener la tecla pulsada var evento = elEvento || window.event; var codigoCaracter = evento.charCode || evento.keyCode; var caracter = String.fromCharCode(codigoCaracter); // Comprobar si la tecla pulsada es alguna de las teclas especiales // (teclas de borrado y flechas horizontales) var tecla_especial = false; for(var i in teclas_especiales) { if(codigoCaracter == teclas_especiales[i]) { tecla_especial = true; break; } } // Comprobar si la tecla pulsada se encuentra en los caracteres permitidos // o si es una tecla especial return permitidos.indexOf(caracter) != -1 || tecla_especial; } // Slo nmeros <input type="text" id="texto" onkeypress="return permite(event, 'num')" /> // Slo letras <input type="text" id="texto" onkeypress="return permite(event, 'car')" /> // Slo letras o nmeros <input type="text" id="texto" onkeypress="return permite(event, 'num_car')" />
El funcionamiento del script anterior se basa en permitir o impedir el comportamiento habitual del evento onkeypress. Cuando se pulsa una tecla, se comprueba si el carcter de esa tecla se encuentra dentro de los caracteres permitidos para ese elemento <input>. Si el carcter se encuentra dentro de los caracteres permitidos, se devuelve true y por tanto el comportamiento de onkeypress es el habitual y la tecla se escribe. Si el carcter no se encuentra dentro de los caracteres permitidos, se devuelve false y por tanto se impide el comportamiento normal de onkeypress y la tecla no llega a escribirse en el input. Adems, el script anterior siempre permite la pulsacin de algunas teclas especiales. En concreto, las teclas BackSpace y Supr para borrar caracteres y las teclas Flecha Izquierda y Flecha Derecha para moverse en el cuadro de texto siempre se pueden pulsar independientemente del tipo de caracteres permitidos.
7.3. Validacin
La principal utilidad de JavaScript en el manejo de los formularios es la validacin de los datos introducidos por los usuarios. Antes de enviar un formulario al servidor, se recomienda validar mediante JavaScript los datos insertados por el usuario. De esta forma, si el usuario ha cometido algn error al rellenar el formulario, se le puede notificar de forma instantnea, sin necesidad de esperar la respuesta del servidor. Notificar los errores de forma inmediata mediante JavaScript mejora la satisfaccin del usuario con la aplicacin (lo que tcnicamente se conoce como "mejorar la experiencia de usuario") y ayuda a reducir la carga de procesamiento en el servidor. Normalmente, la validacin de un formulario consiste en llamar a una funcin de validacin cuando el usuario pulsa sobre el botn de envo del formulario. En esta funcin, se comprueban si los valores que ha introducido el usuario cumplen las restricciones impuestas por la aplicacin. Aunque existen tantas posibles comprobaciones como elementos de formulario diferentes, algunas comprobaciones son muy habituales: que se rellene un campo obligatorio, que se seleccione el valor de una lista desplegable, que la direccin de email indicada sea correcta, que la fecha introducida sea lgica, que se haya introducido un nmero donde as se requiere, etc. A continuacin se muestra el cdigo JavaScript bsico necesario para incorporar la validacin a un formulario:
<form action="" method="" id="" name="" onsubmit="return validacion()"> ... </form>
Y el esquema de la funcin validacion() es el siguiente:

function validacion() { if (condicion que debe cumplir el primer campo del formulario) { // Si no se cumple la condicion... alert('[ERROR] El campo debe tener un valor de...'); return false; } else if (condicion que debe cumplir el segundo campo del formulario) { // Si no se cumple la condicion... alert('[ERROR] El campo debe tener un valor de...'); return false; } ... else if (condicion que debe cumplir el ltimo campo del formulario) { // Si no se cumple la condicion... alert('[ERROR] El campo debe tener un valor de...'); return false; } // Si el script ha llegado a este punto, todas las condiciones
// se han cumplido, por lo que se devuelve el valor true return true; }
El funcionamiento de esta tcnica de validacin se basa en el comportamiento del evento onsubmit de JavaScript. Al igual que otros eventos como onclick y onkeypress, el evento 'onsubmit vara su comportamiento en funcin del valor que se devuelve. As, si el evento onsubmit devuelve el valor true, el formulario se enva como lo hara normalmente. Sin embargo, si el evento onsubmit devuelve el valor false, el formulario no se enva. La clave de esta tcnica consiste en comprobar todos y cada uno de los elementos del formulario. En cuando se encuentra un elemento incorrecto, se devuelve el valor false. Si no se encuentra ningn error, se devuelve el valor true. Por lo tanto, en primer lugar se define el evento onsubmit del formulario como:
onsubmit="return validacion()"
Como el cdigo JavaScript devuelve el valor resultante de la funcin validacion(), el formulario solamente se enviar al servidor si esa funcin devuelve true. En el caso de que la funcin validacion() devuelva false, el formulario permanecer sin enviarse. Dentro de la funcin validacion() se comprueban todas las condiciones impuestas por la aplicacin. Cuando no se cumple una condicin, se devuelve false y por tanto el formulario no se enva. Si se llega al final de la funcin, todas las condiciones se han cumplido correctamente, por lo que se devuelve true y el formulario se enva. La notificacin de los errores cometidos depende del diseo de cada aplicacin. En el cdigo del ejemplo anterior simplemente se muestran mensajes mediante la funcin alert() indicando el error producido. Las aplicaciones web mejor diseadas muestran cada mensaje de error al lado del elemento de formulario correspondiente y tambin suelen mostrar un mensaje principal indicando que el formulario contiene errores. Una vez definido el esquema de la funcin validacion(), se debe aadir a esta funcin el cdigo correspondiente a todas las comprobaciones que se realizan sobre los elementos del formulario. A continuacin, se muestran algunas de las validaciones ms habituales de los campos de formulario.
7.3.1. Validar un campo de texto obligatorio

Se trata de forzar al usuario a introducir un valor en un cuadro de texto o textarea en los que sea obligatorio. La condicin en JavaScript se puede indicar como:
valor = document.getElementById("campo").value; if( valor == null || valor.length == 0 || /^\s+$/.test(valor) ) { return false; }
Para que se de por completado un campo de texto obligatorio, se comprueba que el valor introducido sea vlido, que el nmero de caracteres introducido sea mayor que cero y que no se hayan introducido slo espacios en blanco. La palabra reservada null es un valor especial que se utiliza para indicar "ningn valor". Si el valor de una variable es null, la variable no contiene ningn valor de tipo objeto, array, numrico, cadena de texto o booleano. La segunda parte de la condicin obliga a que el texto introducido tenga una longitud superior a cero caracteres, esto es, que no sea un texto vaco. Por ltimo, la tercera parte de la condicin (/^\s+$/.test(valor)) obliga a que el valor introducido por el usuario no slo est formado por espacios en blanco. Esta comprobacin se basa en el uso de "expresiones regulares", un recurso habitual en cualquier lenguaje de programacin pero que por su gran complejidad no se van a estudiar. Por lo tanto, slo es necesario copiar literalmente esta condicin, poniendo especial cuidado en no modificar ningn carcter de la expresin.
7.3.2. Validar un campo de texto con valores numricos

Se trata de obligar al usuario a introducir un valor numrico en un cuadro de texto. La condicin JavaScript consiste en:
valor = document.getElementById("campo").value; if( isNaN(valor) ) { return false; }
Si el contenido de la variable valor no es un nmero vlido, no se cumple la condicin. La ventaja de utilizar la funcin interna isNaN() es que simplifica las comprobaciones, ya que JavaScript se encarga de tener en cuenta los decimales, signos, etc. A continuacin se muestran algunos resultados de la funcin isNaN():
isNaN(3); isNaN("3"); isNaN(3.3545); isNaN(32323.345); isNaN(+23.2); isNaN("-23.2"); isNaN("23a"); isNaN("23.43.54"); // // // // // // // // false false false false false false true true
7.3.3. Validar que se ha seleccionado una opcin de una lista

Se trata de obligar al usuario a seleccionar un elemento de una lista desplegable. El siguiente cdigo JavaScript permite conseguirlo:
indice = document.getElementById("opciones").selectedIndex; if( indice == null || indice == 0 ) { return false; }
<select id="opciones" name="opciones"> <option value="">- Selecciona un valor -</option> <option value="1">Primer valor</option> <option value="2">Segundo valor</option> <option value="3">Tercer valor</option> </select>
A partir de la propiedad selectedIndex, se comprueba si el ndice de la opcin seleccionada es vlido y adems es distinto de cero. La primera opcin de la lista (Selecciona un valor ) no es vlida, por lo que no se permite el valor 0 para esta propiedad selectedIndex.
7.3.4. Validar una direccin de email

Se trata de obligar al usuario a introducir una direccin de email con un formato vlido. Por tanto, lo que se comprueba es que la direccin parezca vlida, ya que no se comprueba si se trata de una cuenta de correo electrnico real y operativa. La condicin JavaScript consiste en:
valor = document.getElementById("campo").value; if( !(/\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)/.test(valor)) ) { return false; }
La comprobacin se realiza nuevamente mediante las expresiones regulares, ya que las direcciones de correo electrnico vlidas pueden ser muy diferentes. Por otra parte, como el estndar que define el formato de las direcciones de correo electrnico es muy complejo, la expresin regular anterior es una simplificacin. Aunque esta regla valida la mayora de direcciones de correo electrnico utilizadas por los usuarios, no soporta todos los diferentes formatos vlidos de email.
7.3.5. Validar una fecha

Las fechas suelen ser los campos de formulario ms complicados de validar por la multitud de formas diferentes en las que se pueden introducir. El siguiente cdigo asume que de alguna forma se ha obtenido el ao, el mes y el da introducidos por el usuario:
var ano = document.getElementById("ano").value; var mes = document.getElementById("mes").value; var dia = document.getElementById("dia").value; valor = new Date(ano, mes, dia); if( !isNaN(valor) ) { return false; }
La funcin Date(ano, mes, dia) es una funcin interna de JavaScript que permite construir fechas a partir del ao, el mes y el da de la fecha. Es muy importante tener en cuenta que el nmero de mes se indica de 0 a 11, siendo 0 el mes de Enero y 11 el mes de Diciembre. Los das del mes siguen una numeracin diferente, ya que el mnimo permitido es 1 y el mximo 31.
La validacin consiste en intentar construir una fecha con los datos proporcionados por el usuario. Si los datos del usuario no son correctos, la fecha no se puede construir correctamente y por tanto la validacin del formulario no ser correcta.
7.3.6. Validar un nmero de DNI

Se trata de comprobar que el nmero proporcionado por el usuario se corresponde con un nmero vlido de Documento Nacional de Identidad o DNI. Aunque para cada pas o regin los requisitos del documento de identidad de las personas pueden variar, a continuacin se muestra un ejemplo genrico fcilmente adaptable. La validacin no slo debe comprobar que el nmero est formado por ocho cifras y una letra, sino que tambin es necesario comprobar que la letra indicada es correcta para el nmero introducido:
valor = document.getElementById("campo").value; var letras = ['T', 'R', 'W', 'A', 'G', 'M', 'Y', 'F', 'P', 'D', 'X', 'B', 'N', 'J', 'Z', 'S', 'Q', 'V', 'H', 'L', 'C', 'K', 'E', 'T']; if( !(/^\d{8}[A-Z]$/.test(valor)) ) { return false; } if(valor.charAt(8) != letras[(valor.substring(0, 8))%23]) { return false; }
La primera comprobacin asegura que el formato del nmero introducido es el correcto, es decir, que est formado por 8 nmeros seguidos y una letra. Si la letra est al principio de los nmeros, la comprobacin sera /^[A-Z]\d{8}$/. Si en vez de ocho nmeros y una letra, se requieren diez nmeros y dos letras, la comprobacin sera /^\d{10}[A-Z]{2}$/ y as sucesivamente. La segunda comprobacin aplica el algoritmo de clculo de la letra del DNI y la compara con la letra proporcionada por el usuario. El algoritmo de cada documento de identificacin es diferente, por lo que esta parte de la validacin se debe adaptar convenientemente.
7.3.7. Validar un nmero de telfono

Los nmeros de telfono pueden ser indicados de formas muy diferentes: con prefijo nacional, con prefijo internacional, agrupado por pares, separando los nmeros con guiones, etc. El siguiente script considera que un nmero de telfono est formado por nueve dgitos consecutivos y sin espacios ni guiones entre las cifras:
valor = document.getElementById("campo").value; if( !(/^\d{9}$/.test(valor)) ) { return false; }
Una vez ms, la condicin de JavaScript se basa en el uso de expresiones regulares, que comprueban si el valor indicado es una sucesin de nueve nmeros consecutivos. A continuacin se muestran otras expresiones regulares que se pueden utilizar para otros formatos de nmero de telfono: Nmero
900900900 900-900900 900 900900 900 90 09 00 (900) 900900 +34 900900900
Formato /^\d{9}$/ 9 cifras seguidas 9 cifras agrupadas de 3 en 3 y /^\d{3}-\d{3}-\d{3}$/ separadas por guiones 9 cifras, las 3 primeras separadas por /^\d{3}\s\d{6}$/ un espacio 9 cifras, las 3 primeras separadas por /^\d{3}\s\d{2}\s\d{2}\s\d{2}$/ un espacio, las siguientes agrupadas de 2 en 2 9 cifras, las 3 primeras encerradas /^$\d{3}$\s\d{6}$/ por parntesis y un espacio de separacin respecto del resto Prefijo internacional (+ seguido de 2 /^\+\d{2,3}\s\d{9}$/ o 3 cifras), espacio en blanco y 9 cifras consecutivas
Expresin regular
7.3.8. Validar que un checkbox ha sido seleccionado

Si un elemento de tipo checkbox se debe seleccionar de forma obligatoria, JavaScript permite comprobarlo de forma muy sencilla:
elemento = document.getElementById("campo"); if( !elemento.checked ) { return false; }
Si se trata de comprobar que todos los checkbox del formulario han sido seleccionados, es ms fcil utilizar un bucle:
formulario = document.getElementById("formulario"); for(var i=0; i<formulario.elements.length; i++) { var elemento = formulario.elements[i]; if(elemento.type == "checkbox") { if(!elemento.checked) { return false; } } }
7.3.9. Validar que un radiobutton ha sido seleccionado

Aunque se trata de un caso similar al de los checkbox, la validacin de los radiobutton presenta una diferencia importante: en general, la comprobacin que se realiza es que el usuario haya seleccionado algn radiobutton de los que forman un determinado grupo. Mediante JavaScript, es sencillo determinar si se ha seleccionado algn radiobutton de un grupo:
opciones = document.getElementsByName("opciones"); var seleccionado = false; for(var i=0; i<opciones.length; i++) { if(opciones[i].checked) { seleccionado = true; break; } } if(!seleccionado) { return false; }
El anterior ejemplo recorre todos los radiobutton que forman un grupo y comprueba elemento por elemento si ha sido seleccionado. Cuando se encuentra el primer radiobutton seleccionado, se sale del bucle y se indica que al menos uno ha sido seleccionado.

El Objeto Radio

Cargado por

Copyright:

Formatos disponibles

El Objeto Radio

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

El Objeto Radio

Cargado por

Copyright:

Formatos disponibles

El objeto radio

7.2. Utilidades bsicas para formularios

El siguiente cdigo permite determinar si cada radiobutton ha sido seleccionado o no:

Utilizando la propiedad checked, es posible comprobar si cada checkbox ha sido seleccionado:

7.2.2. Establecer el foco en un elemento

if(document.forms.length > 0) { if(document.forms[0].elements.length > 0) { document.forms[0].elements[0].focus(); } }

7.2.3. Evitar el envo duplicado de un formulario

7.2.4. Limitar el tamao de caracteres de un textarea

7.2.5. Restringir los caracteres permitidos en un cuadro de texto

Y el esquema de la funcin validacion() es el siguiente:

// se han cumplido, por lo que se devuelve el valor true return true; }

7.3.1. Validar un campo de texto obligatorio

7.3.2. Validar un campo de texto con valores numricos

7.3.3. Validar que se ha seleccionado una opcin de una lista

7.3.4. Validar una direccin de email

7.3.5. Validar una fecha

7.3.6. Validar un nmero de DNI

7.3.7. Validar un nmero de telfono

7.3.8. Validar que un checkbox ha sido seleccionado

7.3.9. Validar que un radiobutton ha sido seleccionado

También podría gustarte