BelloMuñozEdgarAlejandroTarea12 - Edgar Bello

Vista previa del material en texto

Bello Muñoz Edgar Alejandro 
Validación de formularios en JavaScript 
Cuando tenemos un formulario de datos que queremos enviar a un servidor para su 
correspondiente gestión por parte de una aplicación CGI, resulta muy interesante 
en ocasiones tener la posibilidad de comprobar la integridad de los datos antes de 
ser enviados al servidor. Además, tener la posibilidad de evitar el envío del 
formulario nos permite un mayor control sobre su gestión. 
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 cuál 
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 código 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 + "Seleccionado: " + 
elementos[i].checked); 
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 sólo se 
puede seleccionar uno de ellos cada vez. Por su parte, los checkbox se pueden 
seleccionar de forma independiente respecto de los demás. 
Si se dispone de los siguientes checkbox: 
<input type="checkbox" value="condiciones" name="condiciones" 
id="condiciones"/> He leído y acepto las condiciones 
<input type="checkbox" value="privacidad" name="privacidad" 
id="privacidad"/> He leído la política de privacidad 
Utilizando la propiedad checked, es posible comprobar si cada checkbox ha sido 
seleccionado: 
var elemento = document.getElementById("condiciones"); 
Bello Muñoz Edgar Alejandro 
alert(" Elemento: " + elemento.value + "\n Seleccionado: " + 
elemento.checked); 
 
elemento = document.getElementById("privacidad"); 
alert(" Elemento: " + elemento.value + "\n Seleccionado: " + 
elemento.checked); 
 
Select 
Uno de estos elementos se puede obtener utilizando la etiqueta <SELECT> dentro de un 
formulario. A la etiqueta le podemos añadir un atributo para darle el nombre, NAME, para 
luego acceder a ese campo mediante Javascript. Para expresar cada una de las posibles 
opciones del campo select utilizamos una etiqueta <OPTION> a la que le introducimos un 
atributo VALUE para expresar su valor. El texto que colocamos después de la etiqueta 
<OPTION> sirve como etiqueta de esa opción, es el texto que ve el usuario asociado a esa 
opción. 
Para acceder al valor seleccionado de un campo select podemos utilizar la 
propiedad value del campo select en lugar de acceder a partir del vector de options. 
Sin embargo, esta propiedad sólo está presente en navegadores Internet Explorer, 
por lo que es recomendable acceder utilizando el vector de options con el índice de 
la posición seleccionada si deseamos que la página sea compatible con todos los 
navegadores. 
Los métodos de select son solamente 2 y sirven para lo siguiente: 
blur() 
Para retirar el foco de la aplicación de ese elemento de formulario. 
focus() 
Para poner el foco de la aplicación. 
Objeto option 
Tenemos que pararnos a ver también este objeto para entender bien el campo 
select. Recordamos que las option son las distintas opciones que tiene un select, 
expresadas con la etiqueta <OPTION>. 
Propiedades de option 
Estos objetos sólo tienen propiedades, no tienen métodos. Vamos a verlas. 
defaultSelected 
Bello Muñoz Edgar Alejandro 
Indica con un true o un false si esa opción es la opción por defecto. La opción por 
defecto se consigue con HTML colocando el atributo selected a un option. 
index 
El índice de esa opción dentro del select. 
selected 
Indica si esa opción se encuentra seleccionada o no. 
text 
Es el texto de la opción. Lo que puede ver el usuario en el select, que se escribe 
después de la etiqueta <OPTION>. 
value 
Indica el valor de la opción, que se introduce con el atributo VALUE de la etiqueta 
<OPTION>