Form paginado: código javascript
Del diagrama al programa-II
Una vez que está escrito el código para el proceso principal pasamos a los módulos o funciones que hemos usado en él.: validar, actIndice, actBotones
La función validar()
Esta función se encarga de comprobar que los campos del formulario cumplen con las restricciones del form (en este caso required).
Aquí podemos poner las condiciones que queramos. En este proyecto solo hemos restringido algunos campos para que sean obligatorios o no y las restricciones de tipo (telefono, email).
La función validar va a recoger todos los campos que hay dentro de la página o sección actual, comprueba cada campo con el método de checkValidity, que poseen los controles de un formulario. Colocará la clase error en los bloques cuyo control no sea válido.
Para sleccionar campos independientemente del tipo lo más sencillo es marcar todos los controles con un atirbuto class, en este caso usamos class = "campo".
[En la página donde se agregaban las clases al código HTML se indicaba este cambio.]
Con esto automáticamente el bloque .aviso se hará visible gracias al CSS que le asignamos (.error .aviso). Revisa el código CSS para entender el funcionamiento en esta parte de validar.
//Validar los campos de una section del formulario
function validar(){
const campos = document.querySelectorAll(".form-pag section.active .campo");
let listaCampos = Array.from(campos);
let result = listaCampos.filter(function (v) {
let res = v.checkValidity();
let parent = v.parentNode;
if (!res) {
parent.classList.add('error')
} else {
parent.classList.remove('error')
}
return !res;
});
return result.length == 0 ;
}
Actualizar la barra indice
Actualizar la barra del indice (.indice) tiene dos partes:
- actualizar las marcas (los círculos)
- actualizar los textos.
Ambas son muy similares si observas el diagrama de flujos y se hacen en un solo módulo.
Esta función necesita un argumento: el número de la sección del formulario en el que estamos. Este script deberá desactivar todas las secciones restatnes y activar texto y marca correspondiente.
Fíjate que lee la lista de bloques dentro del elmento linea (marcas) y la que hay dentro del elemento textos (textos). Estas listas se pueden acceder por el número de seccion.
//Actualizar la linea y textos de indice de acuerdo a la
//seccon actual (argumento)
function actIndice(seccion){
let marcas = document.querySelectorAll(".indice .linea div");
let textos = document.querySelectorAll(".indice .textos div");
marcas[seccion].classList.add('active');
document.querySelector('.indice .textos .active').classList.remove("active");
textos[seccion].classList.add('active');
}
Actualizar botones de navegación
Igualmente al cambiar de sección hay que actualizar los botones de navegación según vemos en el diagrama. En la
- sección primera: solo aparece botón siguiente
- secciones intermedias aparecen anterior y siguiente
- ultima sección aparece anterior y enviar
//Muestra u oculta botones de navegación según la seccion donde estemos
function actBotones(seccion){
let secciones = document.querySelectorAll('.form-pag section');;
let btnAnt = document.getElementById('anterior');
let btnSig = document.getElementById('siguiente');
let btnEnv = document.getElementById('enviar');
if(seccion == 0){
btnAnt.classList.remove('visible');
}
else{
btnAnt.classList.add('visible');
if (seccion == secciones.length-1){
btnSig.classList.remove('visible');
btnEnv.classList.add('visible');
}
else{
btnSig.classList.add('visible');
btnEnv.classList.remove('visible');
}
}
}
Comentarios
Repasa cada diagrama de flujo desarrollado para estos módulos.
Debes comprenderlos bien porque de ellos saldrá el código.
Lo ideal es que escribas el código a la primera, pero a veces despues de escribir una primera versión luego se haga una refectorizacón: revisión para simplificar, aclarar u optimizarlo.
En todos las funcines se hace uso de las clases CSS para averiguar la sección activa, o el elemento del índice que debe estar marcado como actual.
Es importante que entiendas bien la aplicación de los estilos CSS.
No se usan variables globales, toda la información está en la propia página.
.