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.467 visualizaciones desde el 27 de Abril del 2018. Una media de 91 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
400 visualizaciones desde el 27 de Abril del 2018. Una media de 28 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.068 visualizaciones desde el 15 de Mayo del 2018. Una media de 84 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