[SOLUCIONADO] alert () en un label

Shionix · #1 (**permalink**) 13/08/2014, 17:38

Hola a todos tengo un formulario donde relleno datos de una persona en el cual quisiera hacer obviamente controles, la forma de controlar es a traves de mensajes pero en un label y eso es lo que no logro hacer y no pude encontrar a alguien que tenga mi misma idea o soy el unico que no tiene ni idea de como se hace que estoy buscando cualquier cosa

.
Por ejemplo el usuario no ingresa el nombre en una caja de texto y aprieta el boton "enviar" lo que se quiere hacer es darle un mensaje al lado del cuadro de texto indicandole que tiene que rellenar ese cuadro de texto con un label.
En vez de hacerlo con un mensaje cuadrado como lo hace el alert de javaScript lo quiero hacer con un mensaje en un label al lado de la cajita de texto :)
Por favor si alguien me tira una idea un link o algo sera de gran ayuda y estare muy agradecido.
Desde ya muchas gracias

Alexis88 · #2 (**permalink**) 13/08/2014, 18:28

Podrías colocar etiquetas al costado de cada caja de texto, cada una conteniendo el mensaje que quieres mostrar, luego, desde la hoja de estilos, ocultas las etiquetas y cuando vayas a realizar la validación en JavaScript, muestras las etiquetas cuyas cajas de texto relacionadas se encuentren vacías. Para que no tengas que mostrar/ocultar cada etiqueta manualmente, asígnales una clase en común para que las afectes en conjunto.

Código HTML:

Ver original<form id = "ejemplo">
    <section>
        <label for = "nombre">Nombre:</label>
        <input type = "text" name = "nombre" />
        <label class = "aviso">Debe de ingresar su nombre</label>
    </section>
    <section>
        <label for = "edad">Edad:</label>
        <input type = "text" name = "edad" />
        <label class = "aviso">Debe de ingresar su edad</label>
    </section>
    <input type = "submit" value = "Procesar" />
</form>

Código CSS:

Ver original.aviso{
    display: none;
}

Código Javascript:

Ver originalvar formulario = document.getElementById("ejemplo"), //El formulario
    elementos = formulario.elements, //Sus elementos
    avisos = document.getElementsByClassName("aviso"), //Las etiquetas
    total = elementos.length; //El total de elementos del fomurlario
 
formulario.addEventListener("submit", function(event){
    var valido = true;
    event.preventDefault();
    
    for (var i = 0; i < total; i++){
        if (!elementos[i].value.length){
            avisos[i].style.display = "inline-block";
            valido = false;
        }
        else{
            if (elementos[i].type != "submit"){
                avisos[i].style.display = "none";
            }
        }
    }
    
    if (valido){
        this.submit();
    }
}, false);

Cuando se realiza el envío de los datos del formulario para su procesamiento (evento submit), lo cancelo con el método preventDefault, declaro una variable que me servirá como comodín para saber si se llenaron todos los campos del formulario y luego procedo a evaluar a cada elemento del formulario, iniciando con el valor booleano true. Si este no posee datos, muestro a la etiqueta equivalente al número del elemento con respecto al total que contiene el formulario, es decir, si la caja de la edad es el segundo elemento del formulario, se tomará a la segunda etiqueta de aviso que es la que le corresponde y la mostramos, además, cambiamos el valor de nuestro comodín a false. Sin embargo, si la caja de texto contiene datos, ocultamos la respectiva etiqueta de aviso, verificando antes que este elemento no sea el botón de envío.

Finalmente, si el valor de nuestro comodín sigue siendo true, es decir, si todas las cajas de texto contienen valores, por lo cual nunca se produjo el cambio del valor del comodín, procedo a enviar a los del formulario para que se procesen.

Saludos

Shionix · #3 (**permalink**) 13/08/2014, 18:55

Hola Alexis desde ya Muchas gracias por tu ayuda :) no me funciona :/ pero creo que es por un error mio seguro, te muestro como lo he dejado.
Formulario

Código HTML:

Ver original<html>
   <head>   <script language="javascript" src="Validacion3.js"></script></head>
   <body>
    <form id = "ejemplo">
        <section>
            <label for = "nombre">Nombre:</label>
            <input type = "text" name = "nombre" />
            <label class = "aviso">Debe de ingresar su nombre</label>
        </section>
        <section>
            <label for = "edad">Edad:</label>
            <input type = "text" name = "edad" />
            <label class = "aviso">Debe de ingresar su edad</label>
        </section>
        <input type = "submit" value = "Procesar" />
    </form>
    </body>
    </html>

Código CSS:

Ver original<style type="text/css">
      .aviso{
        display: none;
    }
 
    </style>

Archivo validacion3.js

Código Javascript:

Ver originalvar formulario = document.getElementById("ejemplo"), //El formulario
        elementos = formulario.elements, //Sus elementos
        avisos = document.getElementsByClassName("aviso"), //Las etiquetas
        total = elementos.length; //El total de elementos del fomurlario
     
    formulario.addEventListener("submit", function(event){
        event.preventDefault();
        var valido = true;
     
        for (var i = 0; i < total; i++){
            if (!elementos[i].value.length){
                avisos[i].style.display = "inline-block";
                valido = false;
            }
            else{
                avisos[i].style.display = "none";
            }
        }
       
        if (valido){
            this.submit();
        }
    }, false);

Creo que lo dividi bien no? Al formulario y al Css lo puse junto para no hacer un archivo nuevo css por 3 renglones nada mas

Alexis88 · #4 (**permalink**) 13/08/2014, 19:06

Esto:

Código HTML:

Ver original<script language="javascript" src="Validacion3.js"></script>

Colócalo justo antes de la etiqueta </body>, de este modo, los elementos se verán afectados por el código JS. Sucede que la carga del código ocurre de arriba hacia abajo, por lo que al cargar el código JS antes que los elementos del DOM, toda la validación que hicimos no servirá ya que no puede afectar a elementos que aún no han cargado.

Saludos

Shionix · #5 (**permalink**) 14/08/2014, 09:28

Hola Alexis Muchas gracias por el aguante :D pero no me funciona hice lo que me dijiste (colocar el codigo dentro del body) pero de igual manera no funciona. Mientras estaba tratando de hacer que funcione se me ocurrió colocar alert() en varios lados para ver que pasaba dejandolo así

Código Javascript:

Ver originalalert("sadassadsa");
 
  var formulario = document.getElementById("ejemplo"), //El formulario
        elementos = formulario.elements; //Sus elementos
        avisos = document.getElementsByClassName("aviso"); //Las etiquetas
        total = elementos.length; //El total de elementos del fomurlario
        
    formulario.addEventListener("submit", function(event){
        event.preventDefault();
        var valido = true;
     
        for (var i = 0; i < total; i++){
            if (!elementos[i].value.length){
                avisos[i].style.display = "inline-block";
                alert("Falso");
                valido = false;
            }
            else{
                avisos[i].style.display = "none";
                alert("Verdadero");
            }
        }
       
        if (valido){
            alert("valido");
            this.submit();
        }
    }, false);

Y lo que pude comprobar es que llega al archivo Validacion3.js pero no hace el resto (lo he comprobado colocando los alert())
Estuve pensando si por ahí le falta un "return" al formulario pero no se si estoy en acierto porque el archivo Validacion3.js tiene una funcion que ya hace de retorno por si solo.
La verdad es que no se que le puede faltar :/

Alexis88 · #6 (**permalink**) 14/08/2014, 11:07

No sé en qué parte estarás colocando la inclusión del archivo JS, pero por si las dudas, me refería a que hagas esto:

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
    <meta charset = "utf-8" />
    <title>Formulario</title>
    <style type = "text/css">
        .aviso{
            display: none;
        }
    </style>
</head>
<body>
    <form id = "ejemplo">
        <section>
            <label for = "nombre">Nombre:</label>
            <input type = "text" name = "nombre" autofocus />
            <label class = "aviso">Debe de ingresar su nombre</label>
        </section>
        <section>
            <label for = "edad">Edad:</label>
            <input type = "text" name = "edad" />
            <label class = "aviso">Debe de ingresar su edad</label>
        </section>
        <input type = "submit" value = "Procesar" />
    </form>
    <script type = "text/javascript" src = "Validacion3.js"></script>
</body>
</html>

Si te fijas bien, la inclusión del archivo JS va debajo de los elementos a los cuales quiero afectar, por eso te dije que si el código JS cargara antes que ellos, nunca los afectaría pues al momento de su carga, dichos elementos aún no existen. Por si las dudas, lo he probado tal y como lo estoy mostrando y funciona perfectamente. Prueba realizando este cambio y nos cuentas cómo te fue.

Saludos

Shionix · #7 (**permalink**) 14/08/2014, 11:33

Que grande Alexis !! Mil gracias funciona funciona funcionaaaaa siiiiiii :D
Hice lo que me dijiste y funciona :D tema solucionado.
Genio!!
PD: Disculpa por mi torpeza :B
Hasta pronto :D