Hola a tod@s!
Después de tiempo siendo solo maquetadora web, ahora estoy empezando a estudiar javascript y tengo varios interrogantes que no se como resolver. Tengo dudas con algo sencillo que estoy aplicando (más bien intentando aplicar) a mi página web (aun en proceso), por eso estaré muy agradecida quien pueda ayudarme a entender que hago mal...
He montado un pequeño formulario de contacto para mi página web, y he creado un mini script que debe ejecutarse cuando se hayan rellenado correctamente los campos del formulario (no antes) y se presione el botón de submit.
Código:
<script>
function message() {
document.getElementById("demo").innerHTML = "Hemos recibido tu mensaje correctamente.<br />En breve nos pondremos en contacto contigo";
}
</script>
...
<form action="#" id="consultanos" autocomplete="on" method="post" target="_self" onSubmit="message">
<label>nombre *</label><br />
<input type="text" class="datos" required /><br />
<label>apellidos *</label><br />
<input type="text" class="datos" required /><br />
<label>población</label><br />
<input type="text" class="datos" /><br />
<label>email *</label><br />
<input type="email" class="datos" required /><br />
<label>asunto</label><br />
<input type="text" class="datos" /><br />
<label>consulta *</label><br />
<textarea id="cuerpo" required ></textarea>
<br />
<br />
<input type="submit" id="botonenvio" value="enviar">
<p id="demo"></p>
</form>
Con el evento onSubmit, el texto del evento no se muestra al presionar el botón (se recarga la página... y eso es algo que no quiero). Si lo hago onClick y lo coloco dentro del submit si que sale el texto, pero no el momento que me gustaría (cuando el formulario esté correcto y se pueda enviar).
¿Cómo puedo hacer que el texto ("Hemos recibido tu mensaje correctamente...") se muestre solo cuando los campos estén rellenados correctamente y se pulse el botón de envío?
Mil gracias de antemano a quien dedique unos minutos a esta causa.