validación de formulario, aviso al lado del campo

educacanis · #1 (**permalink**) 05/02/2012, 07:53

hola, estoy aprendiendo a validad un formulario con campos vacíos.
Hasta ahora he conseguido que si el campo está vacío salga un alert que me diga que debe rellenarlo.

Sin embargo a mí me gustaría que saliese un mensaje al lado del input del formulario diciendo que falta rellenar ese campo. Me podrían decir cómo hacerlo??
Muchas gracias

djaevi · #2 (**permalink**) 05/02/2012, 23:21

puedes colocar al lado del campo un div y asignarle un id y entonces en tu codigo en lugar de colocar alert("error"); colocas, document.getElementById("id del div").innerHTML = "Error";

te dejo este codigo para que lo pruebes.

Código HTML:

Ver original<html>
<head>
<script type="text/javascript">
function validarCampo(idCampo,idDiv) {
    if (document.getElementById(idCampo).value == "") {
        document.getElementById(idDiv).innerHTML = "El mensaje esta vacio";
    }else{
        document.getElementById(idDiv).innerHTML = "El mensaje es correcto";
    }
}
</script>
 
<style>
#miDiv {
    margin-top:30px; 
    margin-bottom:30px; 
    border:solid; 
    height:60px; 
    width:240px;
    font-family:"Trebuchet MS";
}
</style>
 
</head>
 
<body>
    <input type="text" id="campo">
    <div id="miDiv"></div>
    <input type="button" onclick="validarCampo('campo','miDiv');" value="validar">
</body>
</html>

Saludos y me avisas si te funciono ;)

oscarbt · #3 (**permalink**) 06/02/2012, 06:51

Eso lo dejaria asi si quisiera que todos los mensajes me salieran en un solo div

Pero si lo quiero campo por campo lo colocaria asi:

Código HTML:

Ver original<html>
<head>
<script type="text/javascript">
function validarCampo(idCampo,idDiv) {
    if (document.getElementById(idCampo).value == "") {
        document.getElementById(idDiv).innerHTML = "El mensaje esta vacio";
    }else{
        document.getElementById(idDiv).innerHTML = "El mensaje es correcto";
    }
}
</script>
 
 
 
</head>
 
<body>
     <div style="float: left;"><input type="text" id="campo"/></div> <div id="miDiv" style="float: left;"></div>
    <br /><br />
   <input type="button" onclick="validarCampo('campo','miDiv');" value="validar"/>
   
</body>
</html>