Obligar a rellenar los campos en JavaScript

Muchas son las veces que se nos presenta la situación de tener campos obligatorios dentro de un formulario. Multiples son las razones, ya sea porque estamos realizando una encuesta, porque son datos sensibles que tienen que introducirse en una base de datos,.....

Para obligar a cumplimentar estos datos lo primero que debemos de hacer es codificar el evento onSubmit del fomulario. Este evento se genera cuando un usuario quiere enviar el contenido de un formulario, pero antes de que este se envie. En este evento realizaremos la validación.

<form action="" method="post" onSubmit="return validar;">

Nosotros vamos a validar dos cosas. Primero que no se haya dejado ningun campo de texto vacio y segundo que se haya marcado al menos una de las opciones de un grupo de checkbox.

Con lo que respecta a las cajas de texto, deberemos de recorrer el array de elementos del formulario:

camposTexto = formulario.elements;

Al recorrer dicho array solo deberemos de analizar aquellos elementos que sean del tipo text y cuyo valor sea una cadena vacia. Esto lo averiguamos mediante los campos type y value:

if (camposTexto[x].value == '' && camposTexto[x].type=='text') { ... }

Para los checkbox, aunque para hacerlo genérico, deberiamos de recorrer todos los campos del formulario y ver cuales son del typo checkbox, nosotros lo hacemos para un solo grupo, al cual llamamos deportes.

check = formulario.deportes;

Hay que tener en cuenta que los grupos de checkbox deben de tener el mismo valor en el campo name:

<input type="checkbox" name="deportes" value="futbol"> Futbol
<input type="checkbox" name="deportes" value="baloncesto"> Baloncesto
<input type="checkbox" name="deportes" value="atletismo"> Atletismo

A la hora de comprobar si hay alguno marcado, lo que hacemos es recorrerlos todos hasta que encontremos o no uno con marca. Para ello utilizamos un bucle while, y para saber si esta marcado el campo preguntamos por el valor de checked.

Autor: Aulambra
http://www.aulambra.com/ver.asp?id=66

Usuarios que han visto este tema también han visto...

- Validar número de checkbox marcados con Javascript
- Conversor pesetas - euros
- Recarga de página controlada con JavaScript
- Imagen que se desvanece
- Marquesina Ascendente

- Versión imprimible de este documento
- Enviar por e-mail este documento