Activa tus mensajes de error

En esta tarea vamos a interactuar con los campos del formulario y sus mensajes de error. Utilizando JS, vamos a modificar el mensaje de error dependiendo del texto que se encuentre en el campo. Si el campo tiene algo de texto entonces debe aparecer un mensaje que indique todo está bien, si no, debe aparecer un mensaje que indique que el campo no puede estar vacío.

Para lograr esto nosotros debemos saber cuando el usuario escribe/borra algo en nuestro campo y con que valor queda nuestro campo. Por suerte, el browser detecta practicamente todo lo que hacen los usuarios en las páginas web; donde dan click, en que campo escriben, y muchas cosas más. Esto se conoce como eventos.

Como mencioné anteriormente, existen eventos para: cuando se hace click (onclick); cuando el mouse pasa por un elemento (onmouseover); cuando se presiona y suelta una tecla (onkeyup). Lo que tenemos que hacer nosotros es indicarle al browser que es lo que queremos que se ejecute cuando se da un determinado evento.

Como lo que queremos es modificar el mensaje de error apenas el campo tenga un valor válido utilizaremos el evento onkeyup de nuestro campo. Este evento se dispara cada vez que el usuario introduce o borra un caracter en nuestro campo. Veamos como tendría que ser el código JS:

//Esta variable representa el campo <input> del nombre
var txtNombre = document.getElementById('txtNombre');

//Esta variable representa el mensaje <span> que aparece al lado del nombre
var estadoNombre = document.getElementById('estadoNombre');

//Aquí definimos el código que se ejecuta cuando se dispara 
//el evento 'onkeyup'.
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";
    }
}

Analicemos el ejemplo:

Todos los elementos a los que aplica el evento onkeyup tienen la propiedad onkeyup definida, solo es cuestión de darle el código a ejecutar.
Lo que le pasamos a la propiedad onkeyup es una función/método. La sintaxis para definir una función es:
- function nombreDeLaFuncion (parametros) { codigoDeLaFuncion }
- No le dimos nombre a nuestra función porque no la vamos a llamar nosotros, el browser se encarga de llamarla cuando se dispara el evento.
Podemos obtener/cambiar el texto de nuestro <input> utilizando la propiedad value
Podemos obtener/cambiar el texto de nuestros elementos utilizando la propiedad innerHTML
- La razón por la cual <input> no utiliza innerHTML es porque el tag de input no tiene texto interno ya que es un solo tag <input />. Mientras que tags como <span> si tienen texto interno <span>texto</span>
Podemos obtener/cambiar el color de texto de un elemento utilizando las propiedades style.color