
La obligatoriedad de los campos del formulario dependerá del tipo de campo que estemos utilizando. Así, la obligatoriedad de un campo de texto puede ser desde que tenga algún valor, hasta que su formato sea uno específico. Si hablamos de campos de selección o en un combo puede ser que esté alguna de las opciones marcada. Así con todos los tipos de elementos del formulario.
Lo primero que vamos a hacer para explicar el ejemplo va a ser construir un simple formulario:
Vemos que el botón de validación llama a la función validar(). Dentro de esta función dispondremos todos los controles de obligatoriedad de los campos.
El primer control de obligatoriedad es el de los campos de texto. Para ello accedemos directamente a la colección de los elementos del formulario mediante .elements.
camposTexto = document.getElementById("formulario").elements;
Hay que tener en cuenta que esto nos devuelve todos los elementos. Es decir, en nuestro caso 6 elementos. Los dos campos de texto, las 3 opciones y el botón. Como solo nos interesan los campos de texto, lo que vamos a hacer es filtrar por aquellos elementos que sean del tipo «text».
if (camposTexto[x].value == ''
&& camposTexto[x].type=='text'){...}
Si el campo es de texto y está vacío le sacamos un error avisándole y terminamos la ejecución del método mediante un return false.
if (camposTexto[x].value == ''
&& camposTexto[x].type=='text'){
alert("El campo " + camposTexto[x].id + " está vacio y es OBLIGATORIO");
return false;
}
}
Lo siguiente que vamos a validar son los campos de opciones. En este caso vamos a acceder por nombre mediante el método getElementsByName. Ya que todos los elementos tienen el name «deporte».
camposCheck = document.getElementsByName("deporte");
Lo que nos interesa es encontrar alguno que esté selecionado. Es por ello que haremos un bucle cuya condición de salida sea el haber recorrido todos los elementos o haber encontrado alguno marcado.
opcion = false;
x = 0;
while (xEn caso de haber recorrido todos y no haber encontrado ninguno activado, es entonces cuando sacamos el error.
if (!opcion)
alert("Tienes que seleccionar alguna opción");
Jose
tengo la misma inquietud que kali
sAludos
Kali
La idea es muy buena, pero al validar, si hemos introducido, por ejemplo, información de nombre pero no de email, salta la alerta y después se vuelve a resetear todo el formulario. Esto es un problema muy grande a la hora de usar en formularios con muchos (15-20) campos.
¿Tenéis alguna solución a esto?
Angel
haber si me puedes ayudar, tengo un formulario terminado y quisiera hacer los campos obligatirios pero con lo que has puesto aqui no hay manera, haber si me podrias ayudar saludos
angeles
espero me puedas ayudar quiero poner comentarios en mi pagina web!! te lo agradeceria muchosss bss :)
Jose Mateos
Esta magnifico tu website y muy bien explicado, muy util lo de visualizar ejemplo.
Felicidades, seguir así.