Código de JavaScript - Validación automática de formularios

Imágen de perfil

Validación automática de formulariosgráfica de visualizaciones


JavaScript

estrellaestrellaestrellaestrellaestrella(2)
Actualizado el 15 de Mayo del 2018 por Julio César (Publicado el 27 de Abril del 2018)
1.529 visualizaciones desde el 27 de Abril del 2018. Una media de 63 por semana
Éste código valida automáticamente los campos de texto y combos de cualquier formulario.

Requerimientos

Es obligatorio que los campos de los formularios tengan los atributos title y required.
Esta función se ejecuta utilizando el atributo onclick en el formulario.
Recibe como parámetro el objeto this.form

1.0
estrellaestrellaestrellaestrellaestrella(2)

Actualizado el 28 de Abril del 2018 (Publicado el 27 de Abril del 2018)gráfica de visualizaciones de la versión: 1.0
404 visualizaciones desde el 27 de Abril del 2018. Una media de 21 por semana

2.0

Actualizado el 16 de Mayo del 2018 (Publicado el 15 de Mayo del 2018)gráfica de visualizaciones de la versión: 2.0
1.126 visualizaciones desde el 15 de Mayo del 2018. Una media de 56 por semana
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

El código fue refactorizado, ahora utiliza la propiedad form.elements para acceder a todos los elementos en el orden en el que se encuentran dispuestos en el dom, lo que resultó en una menor cantidad de líneas de código y mayor coherencia a la hora de mostrar los mensajes.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function validaForm(e){
    var elements = e.elements;
    for(var i = 0; i < elements.length; i++) {
        if(elements[i].tagName === "INPUT" || elements[i].tagName === "SELECT"){
            if(elements[i].value.trim() === "" && elements[i].required === true) {
                var title = elements[i].getAttribute('title');
                alert("Por favor complete el campo " + title);
                elements[i].focus();
                elements[i].style.borderColor = "red";
                elements[i].style.borderStyle = "dashed";
                return false;
            }
        }
    }
}



Comentarios sobre la versión: 2.0 (0)


No hay comentarios
 

Comentar la versión: 2.0

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s4573  
Revisar política de publicidad