Ver Mensaje Individual
  #2 (permalink)  
Antiguo 07/05/2014, 17:24
aprendiz94
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: [Aporte] Formulario con JavaScript puro

script.js (2/2)
Código Javascript:
Ver original
  1. function validar() {
  2.  
  3.     // Preparamos los campos que vamos a comprobar
  4.     var nombre = document.formulario.nombre;
  5.     var email = document.formulario.email;
  6.     var telefono = document.formulario.telefono;
  7.     var texto = document.formulario.texto;
  8.     var lista = document.formulario.lista;
  9.     var condiciones = document.formulario.condiciones;
  10.  
  11.  
  12.     /* Estilos para los mensajes de error.
  13.      * Se puede ingresar directamente estilos inline o una clase CSS
  14.      */
  15.     var estilos = "background:#e62b3e; border-radius:3px; font-size:13px; color: #fff; margin-bottom: 2px; padding:2px 5px;";
  16.  
  17.  
  18.     // Guarda el resultado para comprobar que el campo "nombre" no esté vacío
  19.     var comprobarNombreVacio = comprobarCampoVacio(nombre);
  20.  
  21.  
  22.     // Guarda el resultado para comprobar que el campo "email" no esté vacío y comprobar si el email es válido
  23.     var comprobarEmailVacio = comprobarCampoVacio(email);
  24.     var validarEmail = email.value.match(/^[a-zA-Z0-9_\-]+([\.][a-zA-Z0-9_\-]+)*\@([a-zA-Z0-9\-]+\.)+([a-zA-Z0-9]{2,4})+$/);
  25.  
  26.  
  27.     /* Guarda el resultado para comprobar que el campo "nombre" no esté vacío
  28.      * y que sean números, espacios o los signos "(", ")" y "+"
  29.      * Esta parte podría hacerse con expresiones regulares pero a modo de práctica me pareció interesante este método para variar
  30.      */
  31.     var comprobarTelefonoVacio = comprobarCampoVacio(telefono);
  32.     var comprobarTelefonoCaracteres = comprobarInputCaracteres(telefono, " ()+0123456789");
  33.  
  34.  
  35.     // Guarda el resultado para comprobar que el campo "texto" no esté vacío
  36.     var comprobarTextoVacio = comprobarCampoVacio(texto);
  37.  
  38.  
  39.     /* Guarda el resultado para comprobar que se seleccionó un campo de la lista
  40.      * Devuelve false si se seleccinó el primer campo, es decir, el campo no válido
  41.      */
  42.     var listaSelectedIndex = lista.selectedIndex;
  43.     var opcionSeleccionada = lista.options[listaSelectedIndex];
  44.     var listaTexto = opcionSeleccionada.text;
  45.     var listaValor = opcionSeleccionada.value;
  46.     var validarLista = listaSelectedIndex != 0;
  47.  
  48.  
  49.     // Guarda el resultado para comprobar que se eligió uno de los radiobuttons y captura su valor
  50.     var inputOnOff = document.formulario.activar_desactivar;
  51.     var inputOnOffSeleccion = false;
  52.     var seleccionValor;
  53.     for (i in inputOnOff) {
  54.         if (inputOnOff[i].checked) {
  55.             inputOnOffSeleccion = true;
  56.             seleccionValor = inputOnOff[i].value;
  57.             break;
  58.         }
  59.     }
  60.  
  61.     // Si el valor es "si", luego debe elegir al menos una casilla (son opciones de "si")
  62.     if (inputOnOffSeleccion == true && seleccionValor == "si") {
  63.         var onOffSubOpciones = document.getElementById("opc_checkboxs").getElementsByTagName("input");
  64.         var subOpcionSeleccion = false;
  65.  
  66.         for (i in onOffSubOpciones) {
  67.             if (onOffSubOpciones[i].checked) {
  68.                 subOpcionSeleccion = true;
  69.                 break;
  70.             }
  71.         }
  72.     }
  73.  
  74.  
  75.     // Guarda el resultado para comprobar que selecconó la casilla de condiciones
  76.     var condicionesChecked = condiciones.checked;
  77.  
  78.  
  79.     /*
  80.      * Empieza a comprobar los resultados, se muestra un mensaje al usuario para false.
  81.      * En caso de que devuelva true, llama a la función borrarMensaje() para ocultar el mensaje en caso de que se alla mostrado antes.
  82.      * Como quiero que se muestren TODOS los mensajes de error simultaneamente,
  83.      * esta me pareció la mejor solución (espero que se entienda y que me den consejos, no estoy convencido de esto).
  84.      */
  85.     if (! comprobarNombreVacio
  86.         || ! comprobarEmailVacio
  87.         || ! validarEmail
  88.         || ! comprobarTelefonoVacio
  89.         || ! comprobarTelefonoCaracteres
  90.         || ! comprobarTextoVacio
  91.         || ! validarLista
  92.         || ! inputOnOffSeleccion
  93.         || (seleccionValor == "si" && ! subOpcionSeleccion)
  94.         || ! condicionesChecked) {
  95.  
  96.         if (! comprobarNombreVacio) {
  97.             mostrarMensaje(nombre, "mensaje_" + nombre.name, "Debes ingresar tu nombre (estilos inline)", estilos, "before");
  98.         } else {
  99.             borrarMensaje("mensaje_" + nombre.name);
  100.         }
  101.  
  102.         if (! comprobarEmailVacio) {
  103.             mostrarMensaje(email, "mensaje_" + email.name, "Debes ingresar tu email (estilos inline)", estilos, "before");
  104.         } else if (! validarEmail) {
  105.             mostrarMensaje(email, "mensaje_" + email.name, "El email no es válido (estilos inline)", estilos, "before");
  106.         } else {
  107.             borrarMensaje("mensaje_" + email.name);
  108.         }
  109.  
  110.         if (! comprobarTelefonoVacio) {
  111.             mostrarMensaje(telefono, "mensaje_" + telefono.name, "Debes ingresar tu teléfono (estilos inline)", estilos, "before");
  112.         } else if (! comprobarTelefonoCaracteres) {
  113.             mostrarMensaje(telefono, "mensaje_" + telefono.name, "Carácteres no válidos (estilos inline)", estilos, "before");
  114.         } else {
  115.             borrarMensaje("mensaje_" + telefono.name);
  116.         }
  117.  
  118.         if (! comprobarTextoVacio) {
  119.             mostrarMensaje(texto, "mensaje_" + texto.name, "Debes escribir un texto (estilos inline)", estilos, "before");
  120.         } else {
  121.             borrarMensaje("mensaje_" + texto.name);
  122.         }
  123.  
  124.         if (! validarLista) {
  125.             mostrarMensaje(lista, "mensaje_lista", "Debes elegir tu país (estilos inline)", estilos, "before");
  126.         } else {
  127.             borrarMensaje("mensaje_lista");
  128.         }
  129.  
  130.         if (! inputOnOffSeleccion) {
  131.             var opcRadioContenedor = document.getElementById("opc_on_off");
  132.             mostrarMensaje(opcRadioContenedor, "elegir_opcion", "Debes elegir una de las opciones (estilos inline)", estilos, "before");
  133.         } else if (inputOnOffSeleccion) {
  134.             borrarMensaje("elegir_opcion");
  135.             if (seleccionValor == "si" && ! subOpcionSeleccion) {
  136.                 var opcCheckboxContenedor = document.getElementById("opc_checkboxs");
  137.                 mostrarMensaje(opcCheckboxContenedor, "mensaje_casilla", "Debes marcar una casilla (estilos inline)", estilos, "before");
  138.             } else {
  139.                 borrarMensaje("mensaje_casilla");
  140.             }
  141.         }
  142.  
  143.         if (! condicionesChecked) {
  144.             mostrarMensaje(condiciones, "mensaje_condiciones", "Debes aceptar las condiciones (estilos inline)", estilos, "before");
  145.         } else {
  146.             borrarMensaje("mensaje_condiciones");
  147.         }
  148.  
  149.         return false;
  150.  
  151.     } else { // Si supera las validaciones, desactivar el botón y enviar el formulário
  152.  
  153.         this.disabled = true;
  154.         this.value = "Enviando...";
  155.         this.form.submit();
  156.  
  157.     }
  158.  
  159. }

Código HTML:
<!DOCTYPE html>

<html lang="es">
    <head>
        <meta charset="utf-8">
        <title>Formulario JavaScript</title>
        <link rel="stylesheet" type="text/css" href="css/styles.css">
        <script src="js/script.js"></script>
    </head>

    <body>
        <form name="formulario" id="formulario" action="#" method="POST">

            <fieldset id="datos_principales_fieldset">

                <input type="text" name="nombre" placeholder="Nombre">
                <input type="text" name="email" placeholder="Email">
                <input type="text" name="telefono" placeholder="Teléfono">

                <textarea name="texto" placeholder="Texto" rows="3" cols="40"></textarea>

                <label id="pais_label">Elije tu país:</label>
                <select name="lista">
                    <option value="">Seleccionar</option>

                    <optgroup label="Continente 1">
                        <option value="1">País 1</option>
                        <option value="2">País 2</option>
                    </optgroup>

                    <optgroup label="Contienente 2">
                        <option value="3">País 3</option>
                        <option value="4">País 4</option>
                    </optgroup>
                </select>

            </fieldset>


            <fieldset id="opciciones_fieldset">

                <div id="opc_on_off">
                    <input type="radio" name="activar_desactivar" id="opcion_activar" value="si">
                    <label for="opcion_activar">Activar</label>

                    <input type="radio" name="activar_desactivar" id="opcion_desactivar" value="no">
                    <label for="opcion_desactivar">Desactivar</label>
                </div>

                <div id="opc_checkboxs">
                    <input type="checkbox" name="opcion1" id="opcion1" value="opcion1" disabled="disabled"><label for="opcion1">Opción 1</label>
                    <input type="checkbox" name="opcion2" id="opcion2" value="opcion2" disabled="disabled"><label for="opcion2">Opción 2</label>
                </div>

            </fieldset>


            <fieldset id="condiciones_fieldset">
                <input type="checkbox" name="condiciones" value="condiciones" checked="checked">
                <label>Acepto las <a href="#">condiciones de uso</a></label>
            </fieldset>


            <input type="button" name="enviar" value="Enviar" class="btn">
            <input type="reset" value="Resetear" class="btn">

        </form>
    </body>
</html>