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");