Validar formulário apenas com HTML e CSS puros

76d atrás

Neste tutorial vamos mostrar a validação de formulários com a maneira nativa do HTML5 e como estilizar os elementos form, input etc, utilizando as pseudo-classes :valid e :invalid do #CSS.

Comece adicionando no seu HTML esse código básico de formulário:

<form>
    <label>
        Nome
        <input name="name" required>
    </label>

    <label>
        Email
        <input name="email" type="email" required>
    </label>

    <button>Enviar</button>
</form>

Aqui estamos usando a validação de formulários do HTML5, required refere-se a um campo obrigatório e type="email" a um campo que só aceita emails.

Agora vamos estilizar o formulário:

input:invalid {
    border: 2px solid red;
}

input:valid {
    border: 2px solid gren;
}

Aqui estamos informando que os inputs inválidos devem ter uma cor vermelha, e os válidos verde.

Para finalizar, adicione o seguinte CSS, que vai deixar o botão de envio mais transparente quando o form estiver inválido.

form:invalid button {
    opacity: 0.5;
}

O código completo e o resultado você pode conferir abaixo:

Comentários (0)