Validação de entrada

Parte da seção JavaScript in Action do Journey de HTML da Coddy — lição 5 de 27.

Ao construir formulários, é importante dar aos usuários feedback imediato enquanto eles digitam, para que não enviem informações incorretas. Isso é chamado de validação em tempo real.

Primeiro, vamos criar um campo de entrada de texto básico. Queremos verificar se o comprimento do nome de usuário tem pelo menos 5 caracteres.

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

Agora, adicione um ouvinte de evento para validar a entrada enquanto o usuário digita:

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

usernameInput.addEventListener('input', function() {
    // Get the current value
    const value = this.value;
    
    // Check if it meets our criteria
 	if (value.length < 5) {
        usernameInput.style.borderColor = "red";
      } else {
        usernameInput.style.borderColor = "green";
      }
});

A borda fica vermelha se o nome de usuário tiver menos de 5 caracteres e verde se for válido.

Desafio

Fácil

Temos uma página com um campo de entrada de e-mail. Atualmente, ela não valida o formato do e-mail.

Sua tarefa é completar a linha dentro do bloco <strong>if</strong> existente de modo que:

Quando o e-mail contiver "@",
A borda do input se torne "2px solid rgb(0, 250, 0)".

Experimente você mesmo

<!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>