ya me salio :) mi error estaba en una de mis etiquetas html. gracias por ayudarme, ahora quiero aprender, como se envia esa info a una base de datos o a un servicio de correo.
Revive al botón de enviar
Ya estamos validando nuestros campos utilizando JS! Lo único que nos falta es conectar nuestro botón de enviar con la validación de los campos. Lo que queremos es que el botón esté habilitado solo cuando todos los campos sean válidos.
Recordemos el código original que estabamos utilizando para deshabilitar el botón:
//Esta es una variable. Su valor es true cuando todos los campos
//son válidos y false cuando hay algún error.
var camposValidos = false;
//En esta variable guardamos el objeto que representa al elemento
//que tenga como ID = boton dentro de nuestro HTML. Asumimos que ese fue
//el ID que se le dio al botón de enviar.
var botonEnviar = document.getElementById('boton');
if (camposValidos == false) {
botonEnviar.disabled = true;
}
else {
botonEnviar.disabled = false;
}
A este código le faltan varias cosas para que haga lo que nosotros necesitamos:
- Falta que verifique si los campos son válidos o no. Ahora mismo utiliza la variable camposValidos, pero realmente no nos dice mucho esa variable sola.
- Este código se ejecuta una sola vez, cuando se carga nuestra página. Nosotros queremos que el botón se habilite y deshabilite dinámicamente.
- Queremos que se verifique si todos los campos son válidos cada vez que modificamos el valor de un campo.
Para lograr nuestro objetivo podemos empezar por modificar este código y convertirlo en una función, como por ejemplo:
function verificarCampos() {
var botonEnviar = document.getElementById('boton');
if (txtNombre.value != "") {
botonEnviar.disabled = false;
}
else {
botonEnviar.disabled = true;
}
}
Esta función por si sola no se ejecutaría, por lo que tenemos que llamarla desde algún punto en nuestro código. Como queremos que los campos se verifiquen (si son válidos o no) cada vez que se modifique un campo vamos a llamar a la función en los eventos onkeyup de nuestros campos. Veamos como quedaría utilizando el nombre:
txtNombre.onkeyup = function() {
if (txtNombre.value == ""){
estadoNombre.innerHTML = "El nombre no puede estar en blanco";
estadoNombre.style.color = "red";
}
else {
estadoNombre.innerHTML = "EL nombre es válido";
estadoNombre.style.color = "green";
}
//Aquí llamamos a la función que verifica los campos para
//habilitar o deshabilitar el botón de enviar
verificarCampos();
}
Para completar esta tarea:
- Remueve el viejo código para deshabilitar el botón de enviar de tu archivo JS. Reemplazalo con la función verificarCampos.
- Modifica la función verificarCampos para que contemple el email y el mensaje. Ahora mismo solo verifica el nombre.
- Asegúrate que la función también se llame cuando el email y el mensaje se modifiquen.
- Cuando hayas implementado todo tu formulario se debe comportar así. Tu código en validador.js debería verse similar a este.
- Añade este código a tu propia página web para tener un formulario de contacto más dinámico!
