Validación de entradas

Parte de la sección JavaScript en Acción del Journey de HTML de Coddy. Lección 5 de 27.

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

Primero, creemos 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 detector de eventos para validar la entrada mientras el usuario escribe:

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

usernameInput.addEventListener('input', function() {
    // Obtén el valor actual
    const value = this.value;
    
    // Comprueba si cumple 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 para el correo electrónico. Actualmente, no valida el formato del correo electrónico.

Tu tarea es completar la línea dentro del bloque existente if para que:

Cuando el correo electrónico contenga "@",
El borde del campo de entrada pase a ser "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>