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 <input type = "text" name = "nombre" /> <label class = "aviso">Debe de ingresar su nombre
</label> <input type = "text" name = "edad" /> <label class = "aviso">Debe de ingresar su edad
</label> <input type = "submit" value = "Procesar" />
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