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.

• Modificar el valor de la propiedad disabled del objeto botonEnviar (botonEnviar.disabled = true) es equivalente a modificar el atributo disabled del tag input, así:

  • < input type='submit' id='boton' disabled='true' >.

• Falta la lógica que verifica si los campos son válidos, ahora mismo asumimos que los campos siempre son inválidos.

Para completar esta tarea:

1. Adiciona el código JS a tu archivo formulario.html. Para esto tienes dos opciones:
   1. Colocar el código en tu archivo HTML
   2. Crear un archivo JS (digamos validador.js) e importar el archivo JS en tu archivo HTML.
2. Asegúrate que el ID que le distes a tu botón de enviar en tu HTML concuerde con el ID que envías en la función getElementById.
3. Verifica que funcione. Si todo está en orden tu botón de Enviar debería aparecer deshabilitado.

Te recomendamos:

• Variables en JavaScript - Mozilla