Veja nesse artigo
Introdução
Nos artigos passados, mostrei como criar uma tela de login, caso você não tenha visto, pode acessar neste link.
Criar esse tipo de projeto é muito bom para aprender e treinar uma tecnologia.
Além de criar do zero, é interessante implementar novas funcionalidades, porque isso vai fazendo com que um projeto pequeno comece a ganhar mais complexidade, os desafios vão aumentando e você vai aprendendo mais.
Para a tela de login, desenvolvi duas novas funcionalidades bem legais para o projeto.
A primeira delas é uma barra de carregamento do site, essa barra é útil para dar um feedback ao usuário sobre o carregamento. Em ambiente local o carregamento é rápido, mas em produção pode demorar um pouco mais, e esse recurso ajuda.
A outra funcionalidade é a validação dos campos do formulário, caso os campos estejam vazios e o usuário clique para fazer o login, o formulário não será enviado, e será mostrado uma linha vermelha abaixo de cada campo, indicando que é obrigatório.
Então vamos lá, ver como implementar essas funcionalidades.
Caso você queira o código fonte do projeto, você pode clonar o projeto neste link.
Barra de progresso
Para a barra de progresso, será utilizado a biblioteca Pace.
Essa biblioteca conta com diversas barras de carregamento de página, você pode escolher a que mais gostar para utilizar em seu projeto.
Alguns exemplos de barra de progresso da biblioteca:

Na página inicial da biblioteca, na sessão “Get Started” há os scripts para serem inseridos no head do projeto, para que seja aplicado a barra de carregamento.
Então no head, adicione essas duas linhas:
<script src="https://cdn.jsdelivr.net/npm/pace-js@latest/pace.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pace-js@latest/pace-theme-default.min.css">
Só isso já faria a biblioteca funcionar, e quando a tela fosse carregar, irá aparecer a barra de carregamento em cima.
Porém, seria interessante personalizar essa barra de carregamento.
Acho que um estilo mais legal, seria colocar a barra simples e também fazer com que a cor da barra, seja igual a da cor principal do projeto, declarada na variável --main-color
Para isso, vamos fazer mais algumas configurações.
Primeiro, vá no estilo minimal e clique em download, que ele irá baixar o arquivo CSS com o estilo.

Com esse arquivo baixado, coloque ele no diretório /css
do projeto.
Depois disso, abra esse arquivo e localize o .pace .pace-progress {
. Provavelmente estará na linha 14, dentro dele tem uma cor de background, troque essa cor para var(--main-color)
. Este bloco deve ficar dessa forma:
.pace .pace-progress {
background: var(--main-color);
position: fixed;
z-index: 2000;
top: 0;
right: 100%;
width: 100%;
height: 2px;
}
Com isso, ao atualizar a tela de login, agora ela conterá a barra de carregamento corretamente configurada no projeto.
Validação do formulário
Caso o usuário não preencha o formulário e clique no botão para fazer login, é ideal informar para ele que os campos de e-mail e senha são requeridos.
Para informar visualmente ao usuário, vamos colocar uma linha vermelha embaixo do campo que estiver vazio.
Pra isso no código, o primeiro passo é criar uma cor nova nas variáveis, que será a cor vermelha, na parte das variáveis, inclua a última linha:
:root {
--main-color: #407bff;
--link-color: #666666;
--text1: #999999;
--highligth-text: #333333;
--input-text: #555555;
--white-color: #FFFFFF;
--point-list: #CCCCCC;
--line-input: #D9D9D9;
--invalid-field: #E74C3C;
}
A cor E74C3C;
representa um vermelho, poderia ter sido usado o red
, porém quis colocar assim para manter o padrão.
Agora, precisamos de uma classe, que irá configurar a cor no campo, no fim do arquivo, adicione o seguinte bloco:
.wrap-input-invalid {
width: 100%;
border-bottom: 2px solid var(--invalid-field);
}
Agora, já temos uma classe que adicionará a cor vermelha na linha debaixo para o campo inválido.
Precisamos realizar duas configurações no formulário, primeiramente, na tag de form, vamos colocar um id para este formulário:
<form class="login-form" id="login-form" method="post">
E no botão de envio, é necessário colocar o type submit, para informar que este botão quando clicado irá submeter o formulário:
<button class="login-form-btn" type="submit">
Login
</button>
Tendo isso, vamos colocar essa classe dinamicamente. Para isso, vamos criar a lógica com o Javascript.
Precisamos adicionar um eventListener no formulário de submit, para quando o formulário for enviado, fazer a validação dos dados.
Quando ele for enviado, precisamos percorrer todos os campos e verificar o valor deles, se for igual a vazio, então vamos adicionar a classe wrap-input-invalid
, a div
que contém o campo.
Essa div
que contém o campo, é a div
um nível acima, a div
pai do input
.
O código com essa lógica fica dessa forma:
let form = document.getElementById("login-form");
form.addEventListener("submit", function(event) {
let inputs = document.getElementsByClassName('input-form');
for (let input of inputs) {
if(input.value.trim() == ""){
input.parentElement.classList.add("wrap-input-invalid")
}
}
event.preventDefault();
});
Com isso, caso o usuário clique no botão login sem preencher nenhum campo, será esse o resultado:

Vídeo
Código fonte
O código fonte está no meu Github
Para ver outros canais onde o posto conteúdo, veja os Links do Programando Soluções.
Desenvolvimento Web com HTML, CSS e JavaScript
Aprenda a testar Aplicações Javascript
Referências
https://codebyzach.github.io/pace/
https://github.com/VitorCeron/Formulario_Login