Foros del Web » Programando para Internet » Javascript »

[Aporte] Formulario con JavaScript puro

 Estas en el tema de [Aporte] Formulario con JavaScript puro en el foro de Javascript en Foros del Web. 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, ...
  #1 (permalink)  
Antiguo 07/05/2014, 17:22
aprendiz94
Invitado
  
Mensajes: n/a
Puntos:
[Aporte] Formulario con JavaScript puro
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: 
Ver original
  1. window.onload = function() {
  2.  
  3.  
  4.     // Evento para validar el formulario
  5.  
  6.     document.formulario.enviar.onclick = validar;
  7.  
  8.  
  9.     // Evento para el campo "Nombre"
  10.  
  11.     document.formulario.nombre.onblur = function() {
  12.  
  13.         var campoName = this.name;
  14.         var comprobarNombreVacio = comprobarCampoVacio(this);
  15.  
  16.         if (! comprobarNombreVacio) {
  17.             mostrarMensaje(this, "mensaje_" + campoName, "Debes ingresar tu nombre", "mensaje_style_1", "before");
  18.         } else {
  19.             borrarMensaje("mensaje_" + campoName);
  20.         }
  21.  
  22.     };
  23.  
  24.  
  25.     // Evento para el campo "Email"
  26.  
  27.     document.formulario.email.onblur = function() {
  28.  
  29.         var campoName = this.name;
  30.         var comprobarEmailVacio = comprobarCampoVacio(this);
  31.         var validarEmail = this.value.match(/^[a-zA-Z0-9_\-]+([\.][a-zA-Z0-9_\-]+)*\@([a-zA-Z0-9\-]+\.)+([a-zA-Z0-9]{2,4})+$/);
  32.  
  33.         if (! comprobarEmailVacio) {
  34.             mostrarMensaje(this, "mensaje_" + campoName, "Debes ingresar tu email", "mensaje_style_1", "before");
  35.         } else if (! validarEmail) {
  36.             mostrarMensaje(this, "mensaje_" + campoName, "El email no es válido", "mensaje_style_1", "before");
  37.         } else {
  38.             borrarMensaje("mensaje_" + campoName);
  39.         }
  40.  
  41.     };
  42.  
  43.  
  44.     // Eventos para el campo "telefono"
  45.  
  46.     document.formulario.telefono.onkeypress = function(evento) {
  47.  
  48.         var evento = evento || window.event;
  49.         var caracterCode = evento.charCode || evento.keyCode;
  50.         var caracter = String.fromCharCode(caracterCode);
  51.         var campoName = this.name;
  52.  
  53.         if(! comprobarTeclaPresionada(caracter, caracterCode, " ()+0123456789")) {
  54.             mostrarMensaje(this, "mensaje_" + campoName, "Carácter no válido", "mensaje_style_1", "before");
  55.             return false;
  56.         } else {
  57.             borrarMensaje("mensaje_" + campoName);
  58.             return true;
  59.         }
  60.  
  61.     }
  62.  
  63.     document.formulario.telefono.onblur = function() {
  64.  
  65.         var campoName = this.name;
  66.         var comprobarTelefonoVacio = comprobarCampoVacio(this);
  67.  
  68.         if (! comprobarTelefonoVacio) {
  69.             mostrarMensaje(this, "mensaje_" + campoName, "Debes ingresar tu teléfono", "mensaje_style_1", "before");
  70.         } else {
  71.             borrarMensaje("mensaje_" + campoName);
  72.         }
  73.  
  74.     }
  75.  
  76.     document.formulario.telefono.onpaste = function(elEvento) {
  77.         return false;
  78.     }
  79.  
  80.  
  81.     // Eventos para el textarea "texto"
  82.  
  83.     document.formulario.texto.onkeypress = function(elEvento) {
  84.  
  85.         var evento = elEvento || window.event;
  86.  
  87.         if (comprobarLimiteDeTexto(evento, this, 10)) {
  88.             return true;
  89.         } else {
  90.             return false;
  91.         }
  92.  
  93.     }
  94.  
  95.     document.formulario.texto.onkeyup = function(elEvento) {
  96.  
  97.         var valorLongitud = this.value.length;
  98.  
  99.         if (valorLongitud <= 10) {
  100.             mostrarMensaje(this, "mensaje_" + this.name, (10-valorLongitud)+" carácteres restantes", "mensaje_style_1", "before");
  101.         }
  102.  
  103.     }
  104.  
  105.     document.formulario.texto.onblur = function() {
  106.  
  107.         var campoName = this.name;
  108.         var comprobarTextoVacio = comprobarCampoVacio(this);
  109.  
  110.         if (! comprobarTextoVacio) {
  111.             mostrarMensaje(this, "mensaje_" + campoName, "Debes escribir un texto", "mensaje_style_1", "before");
  112.         } else {
  113.             borrarMensaje("mensaje_" + campoName);
  114.         }
  115.  
  116.     };
  117.  
  118.     document.formulario.texto.onpaste = function(elEvento) {
  119.         return false;
  120.     }
  121.  
  122.  
  123.     // Eventos para la lista de nombre "lista"
  124.  
  125.     document.formulario.lista.onblur = function() {
  126.  
  127.         var listaSelectedIndex = this.selectedIndex;
  128.         var opcionSeleccionada = this.options[listaSelectedIndex];
  129.         var campoName = this.name;
  130.         if (listaSelectedIndex == 0) {
  131.             mostrarMensaje(this, "mensaje_" + campoName, "Debes elegir tu país", "mensaje_style_1", "before");
  132.         } else {
  133.             borrarMensaje("mensaje_" + campoName);
  134.         }
  135.  
  136.     }
  137.  
  138.  
  139.     // Eventos para desactivar/activar los chechboxs
  140.  
  141.     document.getElementById("opcion_activar").onclick = opcionesActivarDesactivar;
  142.  
  143.     document.getElementById("opcion_desactivar").onclick = opcionesActivarDesactivar;
  144.  
  145.     function opcionesActivarDesactivar() {
  146.  
  147.         campos = document.getElementById("opc_checkboxs").getElementsByTagName("input");
  148.  
  149.         for (i in campos) {
  150.             if (campos[i].disabled == true && this.id == "opcion_activar") {
  151.                 campos[i].disabled = false;
  152.             } else if (campos[i].disabled == false && this.id == "opcion_desactivar") {
  153.                 campos[i].disabled = true;
  154.             }
  155.         }
  156.  
  157.     }
  158.  
  159. }
  160.  
  161.  
  162. function comprobarCampoVacio(campo) {
  163.  
  164.     var valor = campo.value;
  165.  
  166.     if (valor == null || valor == 0 || valor.match(/^\s+$/)) {
  167.         return false;
  168.     } else {
  169.         return true;
  170.     }
  171.  
  172. }
  173.  
  174.  
  175. function comprobarInputCaracteres(campo, caracteresPermitidos) {
  176.  
  177.     var caracteres = campo.value.split("");
  178.  
  179.     var permitir = true;
  180.     for (i in caracteres) {
  181.         if (caracteresPermitidos.indexOf(caracteres[i]) == -1) {
  182.             permitir = false;
  183.             break;
  184.         }
  185.     }
  186.  
  187.     return permitir;
  188.  
  189. }
  190.  
  191.  
  192. function comprobarLimiteDeTexto(evento, campo, limite) {
  193.  
  194.     var teclasEspeciales = [8, 46, 37, 39, 116];
  195.  
  196.     if (campo.value.length >= limite) {
  197.  
  198.         var codigoCaracter = evento.charCode || evento.keyCode;
  199.         var resultado = false;
  200.         for (i in teclasEspeciales) {
  201.             if (codigoCaracter == teclasEspeciales[i]) {
  202.                 resultado = true;
  203.             }
  204.         }
  205.  
  206.         return resultado;
  207.  
  208.     } else {
  209.         return true;
  210.     }
  211.  
  212. }
  213.  
  214.  
  215. function comprobarTeclaPresionada(caracter, caracterCode, caracteresPermitidos) {
  216.  
  217.     var teclasEspeciales = [8, 46, 37, 39, 116];
  218.  
  219.     var teclaEspecial = false;
  220.     for (i in teclasEspeciales) {
  221.         if (caracterCode == teclasEspeciales[i]) {
  222.             teclaEspecial = true;
  223.             break;
  224.         }
  225.     }
  226.  
  227.     if (teclaEspecial) {
  228.         return true;
  229.     } else if (caracteresPermitidos.indexOf(caracter) == -1) {
  230.         return false;
  231.     } else {
  232.         return true;
  233.     }
  234.  
  235. }
  236.  
  237.  
  238. function camelCase(cadena) {
  239.     return cadena.toLowerCase().replace(/-(.)/g, function(match, grupo) {
  240.         return grupo.toUpperCase();
  241.     });
  242. }
  243.  
  244. function mostrarMensaje(elemento, idCajaMensaje, mensajeTxt, estilos, afterBefore) {
  245.  
  246.     var cajaMsg = document.getElementById(idCajaMensaje);
  247.  
  248.     if (cajaMsg) {
  249.         cajaMsg.innerHTML = mensajeTxt;
  250.     } else {
  251.  
  252.         var caja = document.createElement("div");
  253.         var mensaje = document.createTextNode(mensajeTxt);
  254.  
  255.         caja.appendChild(mensaje);
  256.         caja.id = idCajaMensaje;
  257.  
  258.         var separar;
  259.         estilos = estilos.split(";");
  260.         for (i in estilos) {
  261.  
  262.             separar = estilos[i].split(":");
  263.  
  264.             if (separar.length == 1) {
  265.                 caja.className = separar[0];
  266.                 break;
  267.             } else {
  268.                 caja.style[camelCase(separar[0]).replace(/(\s)/g, '')] = separar[1];
  269.             }
  270.  
  271.         }
  272.  
  273.         if (afterBefore == "before") {
  274.             elemento.parentNode.insertBefore(caja, elemento);
  275.         } else if (afterBefore == "after") {
  276.             insertAfter(caja, elemento);
  277.         }
  278.  
  279.     }
  280.  
  281. }
  282.  
  283.  
  284. function borrarMensaje(idCaja) {
  285.     var cajaMsg = document.getElementById(idCaja);
  286.     if (cajaMsg) {
  287.         cajaMsg.parentNode.removeChild(cajaMsg);
  288.     }
  289. }
  290.  
  291.  
  292. function insertAfter(nuevoNodo, nodoExistente) {
  293.     if (nodoExistente.nextSibling) {
  294.         nodoExistente.parentNode.insertBefore(nuevoNodo, nodoExistente.nextSibling);
  295.     } else {
  296.         nodoExistente.parentNode.appendChild(nuevoNodo);
  297.     }
  298. }
Última edición por zerokilled; 08/05/2014 a las 17:34 Razón: arreglar código de acuerdo al post data del autor
  #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>
  #3 (permalink)  
Antiguo 07/05/2014, 17:25
aprendiz94
Invitado
  
Mensajes: n/a
Puntos:
Respuesta: [Aporte] Formulario con JavaScript puro
Un poco de CSS

Código CSS: 
Ver original
  1. /* RESET CSS
  2. --------------------------------------------------*/
  3.  
  4. body, form, h1, h2, h3, h4,h5, h6, p {
  5.     margin: 0;
  6.     padding: 0;
  7. }
  8. ol, ul, li {
  9.     list-style: none;
  10.     margin: 0;
  11.     padding: 0;
  12. }
  13. a img {
  14.     border: none;
  15. }
  16. fieldset {
  17.     border: none;
  18.     margin: 0;
  19.     padding: 0;
  20. }
  21. input, select, textarea  {
  22.     outline: none;
  23. }
  24. address {
  25.     font-style: normal;
  26. }
  27. table {
  28.     border-collapse: collapse;
  29.     border-spacing: 0;
  30. }
  31.  
  32.  
  33. /* BODY
  34. --------------------------------------------------*/
  35.  
  36. body {
  37.     background: #efefef;
  38.     font-family: arial;
  39. }
  40.  
  41.  
  42. /* FORMULARIO
  43. --------------------------------------------------*/
  44.  
  45. #formulario {
  46.     background: #fcfcfc;
  47.     border: 1px solid #aaa;
  48.     border-radius: 5px;
  49.     box-shadow: 0 2px 2px 0 #ccc;
  50.     padding: 25px;
  51.     margin: 50px auto;
  52.     width: 340px;
  53. }
  54.  
  55.     fieldset#datos_principales_fieldset input,
  56.     fieldset#datos_principales_fieldset textarea {
  57.         border: 1px solid #aaa;
  58.         display: block;
  59.         font: 13px arial;
  60.         margin: 0 0 10px 0;
  61.         padding: 10px;
  62.         width: 318px;
  63.     }
  64.     fieldset#datos_principales_fieldset #pais_label {
  65.         color: #444;
  66.         display: block;
  67.         font-size: 14px;
  68.         margin: 0 0 5px 0;
  69.     }
  70.     select[name=lista] {
  71.         border: 1px solid #aaa;
  72.         display: block;
  73.         margin: 0 0 5px 0;
  74.         padding: 5px;
  75.         width: 160px;
  76.     }
  77.  
  78.  
  79.     fieldset#opciciones_fieldset {
  80.         margin: 20px 0 0 0;
  81.     }
  82.         #opc_on_off label {
  83.             color: #444;
  84.             display: inline-block;
  85.             font-size: 14px;
  86.             margin: 0 20px 0 0;
  87.         }
  88.         #opc_on_off input {
  89.             border: 1px solid #aaa;
  90.             display: inline-block;
  91.             margin-right: 5px;
  92.         }
  93.  
  94.         #opc_checkboxs {
  95.             background: #e2e2e2;
  96.             font-size: 12px;
  97.             padding: 10px;
  98.             margin: 10px 0 0 0;
  99.         }
  100.             #opc_checkboxs label {
  101.                 margin: 0 10px 0 5px;
  102.             }
  103.  
  104.  
  105.     fieldset#condiciones_fieldset {
  106.         font-size: 12px;
  107.         margin: 20px 0 0 0;
  108.     }
  109.         fieldset#condiciones_fieldset a {
  110.             color: #444;
  111.             text-decoration: none;
  112.         }
  113.             fieldset#condiciones_fieldset a:hover {
  114.                 border-bottom: 1px dotted #444;
  115.             }
  116.  
  117.  
  118.     .btn {
  119.         background: #ccc;
  120.         border: 1px solid #888;
  121.         cursor: pointer;
  122.         margin: 20px 0 0 0;
  123.         padding: 5px;
  124.         text-shadow: 0 1px 1px #ddd;
  125.     }
  126.  
  127.  
  128. /* MENSAJES
  129. --------------------------------------------------*/
  130.  
  131. .mensaje_style_1 {
  132.     background: #e7585b;
  133.     border: 1px solid #fff;
  134.     border-radius: 3px;
  135.     box-shadow: 0 2px 2px #ddd;
  136.     color: #fff;
  137.     font-size: 15px;
  138.     padding: 2px 4px;
  139.     margin-bottom: 5px;
  140. }

PD: El formulario no es compatible con todas las versiones de IE, pronto pienso trabajar en eso. Tampoco está terminado, quiero ampliarlo más pero como ya es funcional decidí compartirlo. Otra cosa, algunas partes de código no las hice yo, como la función para transformar una cadena en camelcase o el "insertAfter".

EDITO:
Antes de copiar el código había cambiado algo y no me di cuenta de un error.

En la línea 196 hay que cambiar esto:

Código Javascript: 
Ver original
  1. if (campo.valor.length >= limite)

por esto:

Código Javascript: 
Ver original
  1. if (campo.value.length >= limite)
Última edición por aprendiz94; 07/05/2014 a las 18:06

Etiquetas: formulario, input, jquery, js, puro, select, valor
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 08:59.