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.

Ahora mismo en nuestro formulario debe haber un mensaje en rojo al lado de cada campo, indicando que hay que llenar el campo. Veamos como podemos hacer para que el mensaje cambie de manera dinámica:

En un archivo JS podemos tener algo como esto:

//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 'onchange'.
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";
    }
}