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;
    }
}