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 con código 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 botón 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 válidos, 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. Crear un archivo JS (digamos validador.js) e importar el archivo JS en tu archivo formulario.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