Vamos a empezar a insertar JS a nuestra página. Lo primero que vamos a hacer es deshabilitar el botón de submit/enviar mientras que nuestros campos del formulario no sean válidos. Para esto, vamos a necesitar lo siguiente:

1. Accesar al elemento botón y modificar sus atributos.
2. Codificar la lógica que verifica si el botón debe estar habilitado o no.

Ambas cosas las vamos a hacer en un archivo JS. Veamos una manera de hacerlo:

//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 boton de enviar. 
var botonEnviar = document.getElementById('boton');

if (camposValidos == false) {
    botonEnviar.disabled = true;
}
else {
    botonEnviar.disabled = false;
}

Analicemos el Ejemplo:

• Utilizamos 2 variables en el ejemplo (camposValidos, botonEnviar). Para declararlas es recomendable utilizar el keyword var antes del nombre de la variable.
• Utilizamos la función getElementById para obtener el objeto que representa al elemento en nuestro HTML que tenga como ID = boton. Este objeto se lo pasamos a la variable botonEnviar para trabajarlo con mayor comodidad. Más adelante veremos esto más a fondo.
• Utilizamos un if que verifica el estado de los campos (utilizando camposValidos). Si los campos no son validos, entonces el botón debe estar deshabilitado.
• Falta la lógica que verifica si los campos son válidos, ahora mismo asumimos que los campos siempre son inválidos.