Validación de entradas

Parte de la sección JavaScript in Action del Journey de HTML de Coddy — lección 5 de 27.

Al construir formularios, es importante dar a los usuarios retroalimentación inmediata mientras escriben, para que no envíen información incorrecta. Esto se llama validación en tiempo real.

Primero, vamos a crear un campo de entrada de texto básico. Queremos comprobar si la longitud del nombre de usuario es de al menos 5 caracteres.

<input type="text" id="username" placeholder="Enter username">

Ahora, añade un escuchador de eventos para validar la entrada mientras el usuario escribe:

const usernameInput = document.getElementById('username');
const usernameError = document.getElementById('usernameError');

usernameInput.addEventListener('input', function() {
    // Obtener el valor actual
    const value = this.value;
    
    // Comprobar si cumple con nuestros criterios
 	if (value.length < 5) {
        usernameInput.style.borderColor = "red";
      } else {
        usernameInput.style.borderColor = "green";
      }
});

El borde se vuelve rojo si el nombre de usuario tiene menos de 5 caracteres y verde si es válido.

Desafío

Fácil

Tenemos una página con un campo de entrada de correo electrónico. Actualmente, no valida el formato del correo electrónico.

Tu tarea es completar la línea dentro del bloque <strong>if</strong> existente de modo que:

Cuando el correo electrónico contenga "@",
El borde de la entrada se vuelva "2px solid rgb(0, 250, 0)".

Pruébalo tú mismo

<!DOCTYPE html>
<html>
<head>
    <title>Email Validation</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <form>
            <label for="email">Email:</label>
            <input type="text" id="email" placeholder="Enter your email">
        </form>
    </div>

    <script src="script.js"></script>
</body>
</html>