[Aporte] Formulario con JavaScript puro

[aprendiz94]

Buenas, estoy siguiendo un curso de JavaScript básico y decidí hacer un formulario con las validaciones básicas usando JavaScript puro, sin jQuery u otras herramientas, para practicar lo que he aprendido.

Ya había tocado JavaScript antes así que no fue complicado. Pero tengo poca experiencia y todo lo que había visto antes era muy superficial, por eso creo que a mi código le falta mucho por corregir y mejorar. Antes todo lo que necesitaba lo buscaba en Google sin saber mucho de JavaScript y además para muchas cosas siempre dependía de jQuery.

Bueno, les dejo el código del formulario, espero que les sea de utilidad y me ayuden a mejorarlo. Todas las críticas son bienvenidas.
Es sólo una práctica, el objetivo es mostrar las validaciones básicas de un formulario.

Características principales:

• Validaciones en tiempo real.

• Mensajes personalizados: se le puede pasar un texto personalizado, estilos inline o clases css, se puede elegir el lugar (un elemento) donde va a aparecer el mensaje y si va a aparecer antes o después del elemento.

• Límite de caracteres en un textarea.

• Validación de email.

• Validación de caracteres permitidos.

• Validación de campos vacíos, listas y checkboxs no seleccionados, etc.

script.js (1/2)

Código Javascript:

window.onload = function() {
 
 
    // Evento para validar el formulario
 
    document.formulario.enviar.onclick = validar;
 
 
    // Evento para el campo "Nombre"
 
    document.formulario.nombre.onblur = function() {
 
        var campoName = this.name;
        var comprobarNombreVacio = comprobarCampoVacio(this);
 
        if (! comprobarNombreVacio) {
            mostrarMensaje(this, "mensaje_" + campoName, "Debes ingresar tu nombre", "mensaje_style_1", "before");
        } else {
            borrarMensaje("mensaje_" + campoName);
        }
 
    };
 
 
    // Evento para el campo "Email"
 
    document.formulario.email.onblur = function() {
 
        var campoName = this.name;
        var comprobarEmailVacio = comprobarCampoVacio(this);
        var validarEmail = this.value.match(/^[a-zA-Z0-9_\-]+([\.][a-zA-Z0-9_\-]+)*\@([a-zA-Z0-9\-]+\.)+([a-zA-Z0-9]{2,4})+$/);
 
        if (! comprobarEmailVacio) {
            mostrarMensaje(this, "mensaje_" + campoName, "Debes ingresar tu email", "mensaje_style_1", "before");
        } else if (! validarEmail) {
            mostrarMensaje(this, "mensaje_" + campoName, "El email no es válido", "mensaje_style_1", "before");
        } else {
            borrarMensaje("mensaje_" + campoName);
        }
 
    };
 
 
    // Eventos para el campo "telefono"
 
    document.formulario.telefono.onkeypress = function(evento) {
 
        var evento = evento || window.event;
        var caracterCode = evento.charCode || evento.keyCode;
        var caracter = String.fromCharCode(caracterCode);
        var campoName = this.name;
 
        if(! comprobarTeclaPresionada(caracter, caracterCode, " ()+0123456789")) {
            mostrarMensaje(this, "mensaje_" + campoName, "Carácter no válido", "mensaje_style_1", "before");
            return false;
        } else {
            borrarMensaje("mensaje_" + campoName);
            return true;
        }
 
    }
 
    document.formulario.telefono.onblur = function() {
 
        var campoName = this.name;
        var comprobarTelefonoVacio = comprobarCampoVacio(this);
 
        if (! comprobarTelefonoVacio) {
            mostrarMensaje(this, "mensaje_" + campoName, "Debes ingresar tu teléfono", "mensaje_style_1", "before");
        } else {
            borrarMensaje("mensaje_" + campoName);
        }
 
    }
 
    document.formulario.telefono.onpaste = function(elEvento) {
        return false;
    }
 
 
    // Eventos para el textarea "texto"
 
    document.formulario.texto.onkeypress = function(elEvento) {
 
        var evento = elEvento || window.event;
 
        if (comprobarLimiteDeTexto(evento, this, 10)) {
            return true;
        } else {
            return false;
        }
 
    }
 
    document.formulario.texto.onkeyup = function(elEvento) {
 
        var valorLongitud = this.value.length;
 
        if (valorLongitud <= 10) {
            mostrarMensaje(this, "mensaje_" + this.name, (10-valorLongitud)+" carácteres restantes", "mensaje_style_1", "before");
        }
 
    }
 
    document.formulario.texto.onblur = function() {
 
        var campoName = this.name;
        var comprobarTextoVacio = comprobarCampoVacio(this);
 
        if (! comprobarTextoVacio) {
            mostrarMensaje(this, "mensaje_" + campoName, "Debes escribir un texto", "mensaje_style_1", "before");
        } else {
            borrarMensaje("mensaje_" + campoName);
        }
 
    };
 
    document.formulario.texto.onpaste = function(elEvento) {
        return false;
    }
 
 
    // Eventos para la lista de nombre "lista"
 
    document.formulario.lista.onblur = function() {
 
        var listaSelectedIndex = this.selectedIndex;
        var opcionSeleccionada = this.options[listaSelectedIndex];
        var campoName = this.name;
        if (listaSelectedIndex == 0) {
            mostrarMensaje(this, "mensaje_" + campoName, "Debes elegir tu país", "mensaje_style_1", "before");
        } else {
            borrarMensaje("mensaje_" + campoName);
        }
 
    }
 
 
    // Eventos para desactivar/activar los chechboxs
 
    document.getElementById("opcion_activar").onclick = opcionesActivarDesactivar;
 
    document.getElementById("opcion_desactivar").onclick = opcionesActivarDesactivar;
 
    function opcionesActivarDesactivar() {
 
        campos = document.getElementById("opc_checkboxs").getElementsByTagName("input");
 
        for (i in campos) {
            if (campos[i].disabled == true && this.id == "opcion_activar") {
                campos[i].disabled = false;
            } else if (campos[i].disabled == false && this.id == "opcion_desactivar") {
                campos[i].disabled = true;
            }
        }
 
    }
 
}
 
 
function comprobarCampoVacio(campo) {
 
    var valor = campo.value;
 
    if (valor == null || valor == 0 || valor.match(/^\s+$/)) {
        return false;
    } else {
        return true;
    }
 
}
 
 
function comprobarInputCaracteres(campo, caracteresPermitidos) {
 
    var caracteres = campo.value.split("");
 
    var permitir = true;
    for (i in caracteres) {
        if (caracteresPermitidos.indexOf(caracteres[i]) == -1) {
            permitir = false;
            break;
        }
    }
 
    return permitir;
 
}
 
 
function comprobarLimiteDeTexto(evento, campo, limite) {
 
    var teclasEspeciales = [8, 46, 37, 39, 116];
 
    if (campo.value.length >= limite) {
 
        var codigoCaracter = evento.charCode || evento.keyCode;
        var resultado = false;
        for (i in teclasEspeciales) {
            if (codigoCaracter == teclasEspeciales[i]) {
                resultado = true;
            }
        }
 
        return resultado;
 
    } else {
        return true;
    }
 
}
 
 
function comprobarTeclaPresionada(caracter, caracterCode, caracteresPermitidos) {
 
    var teclasEspeciales = [8, 46, 37, 39, 116];
 
    var teclaEspecial = false;
    for (i in teclasEspeciales) {
        if (caracterCode == teclasEspeciales[i]) {
            teclaEspecial = true;
            break;
        }
    }
 
    if (teclaEspecial) {
        return true;
    } else if (caracteresPermitidos.indexOf(caracter) == -1) {
        return false;
    } else {
        return true;
    }
 
}
 
 
function camelCase(cadena) {
    return cadena.toLowerCase().replace(/-(.)/g, function(match, grupo) {
        return grupo.toUpperCase();
    });
}
 
function mostrarMensaje(elemento, idCajaMensaje, mensajeTxt, estilos, afterBefore) {
 
    var cajaMsg = document.getElementById(idCajaMensaje);
 
    if (cajaMsg) {
        cajaMsg.innerHTML = mensajeTxt;
    } else {
 
        var caja = document.createElement("div");
        var mensaje = document.createTextNode(mensajeTxt);
 
        caja.appendChild(mensaje);
        caja.id = idCajaMensaje;
 
        var separar;
        estilos = estilos.split(";");
        for (i in estilos) {
 
            separar = estilos[i].split(":");
 
            if (separar.length == 1) {
                caja.className = separar[0];
                break;
            } else {
                caja.style[camelCase(separar[0]).replace(/(\s)/g, '')] = separar[1];
            }
 
        }
 
        if (afterBefore == "before") {
            elemento.parentNode.insertBefore(caja, elemento);
        } else if (afterBefore == "after") {
            insertAfter(caja, elemento);
        }
 
    }
 
}
 
 
function borrarMensaje(idCaja) {
    var cajaMsg = document.getElementById(idCaja);
    if (cajaMsg) {
        cajaMsg.parentNode.removeChild(cajaMsg);
    }
}
 
 
function insertAfter(nuevoNodo, nodoExistente) {
    if (nodoExistente.nextSibling) {
        nodoExistente.parentNode.insertBefore(nuevoNodo, nodoExistente.nextSibling);
    } else {
        nodoExistente.parentNode.appendChild(nuevoNodo);
    }
}