Ver Mensaje Individual
  #2 (permalink)  
Antiguo 13/08/2014, 18:28
Avatar de Alexis88
Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 12 años, 5 meses
Puntos: 977
Respuesta: alert () en un label

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
  1. <form id = "ejemplo">
  2.     <section>
  3.         <label for = "nombre">Nombre:</label>
  4.         <input type = "text" name = "nombre" />
  5.         <label class = "aviso">Debe de ingresar su nombre</label>
  6.     </section>
  7.     <section>
  8.         <label for = "edad">Edad:</label>
  9.         <input type = "text" name = "edad" />
  10.         <label class = "aviso">Debe de ingresar su edad</label>
  11.     </section>
  12.     <input type = "submit" value = "Procesar" />
  13. </form>

Código CSS:
Ver original
  1. .aviso{
  2.     display: none;
  3. }

Código Javascript:
Ver original
  1. var formulario = document.getElementById("ejemplo"), //El formulario
  2.     elementos = formulario.elements, //Sus elementos
  3.     avisos = document.getElementsByClassName("aviso"), //Las etiquetas
  4.     total = elementos.length; //El total de elementos del fomurlario
  5.  
  6. formulario.addEventListener("submit", function(event){
  7.     var valido = true;
  8.     event.preventDefault();
  9.    
  10.     for (var i = 0; i < total; i++){
  11.         if (!elementos[i].value.length){
  12.             avisos[i].style.display = "inline-block";
  13.             valido = false;
  14.         }
  15.         else{
  16.             if (elementos[i].type != "submit"){
  17.                 avisos[i].style.display = "none";
  18.             }
  19.         }
  20.     }
  21.    
  22.     if (valido){
  23.         this.submit();
  24.     }
  25. }, 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
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand