Continuando o com sistema de cadastro, até agora fizemos a parte do html e css
A parte do HTML: https://coderprice.blogspot.com/2021/08/sistema-de-cadastro-parte-1-criando-um.html
E do CSS: https://coderprice.blogspot.com/2021/08/sistema-de-cadastro-parte-212-colocando.html
e agora é a parte do javascript, é nele que iremos verificar se o campo está vazio ou se escreveu algum caractere invalido.
Antes de começar iremos adicionar umas coisinhas no html e no css
Primeiro iremos colocar as id nos inputs para poder o usar no javascript de forma mais prática
*No input do login você vai colocar a id "loginField" assim: <input id="loginField" class="inputField" type="text" placeholder="Digite o seu login">
*No input da senha você vai colocar a id "passwordField" assim: <input id="passwordField" class="inputField" type="password" placeholder="Digite o sua senha">
*No input do Email você vai colocar a id "emailField" assim: <input id="emailField" class="inputField" type="email" placeholder="Digite seu email">
Depois iremos criar a mensagem de campo vazio, criando uma div debaixo dos inputs com uma class com nome "errorMessage", dentro dele iremos colocar a imagem, para colocar a imagem na página você sua a tag "<img>" e coloca o atributo "src" que será o nome da imagem(é parecido com atributo "href" usado no parte 2 do css)
e colocar uma classe na imagem com nome "errorIconImage"
assim: <img src="NomeDaImagem.png" class="errorIconImage"> ou <img src="NomeDaImagem.jpg" class="errorIconImage">
*Você pode colocar qualquer imagem de erro, mas você pode usar as imagens aqui:
E de baixo da tag da "<img>" iremos colocar um texto dizendo que o campo está vazio, colocando uma tag "<label>" que permite colocar uma legenda para o item, com a classe "fieldErrrorMessage".
E dentro do label você vai colocar "O campo de NOMEDOCAMPO está vazio", No "NOMEDOCAMPO" você vai colocar o nome do campo que está acima
por exemplo:
*Se o input acima for o campo de login você vai colocar: <label class="fieldErrrorMessage">O campo de login está vazio</label>
*Se o input acima for o campo de senha você vai colocar: <label class="fieldErrrorMessage">O campo de senha está vazio</label>
*Se o input acima for o campo de email você vai colocar: <label class="fieldErrrorMessage">O campo de email está vazio</label>
para finalizar você vai colocar a mensagem de erro caso digite algum caractere inválido no campo de login e email, você vai copiar a div errorMessage com a tag img e label e colar uma acima do input da senha e outra acima do botão
*No errorMessage acima do campo de senha, dentro do label você vai colocar "O campo de login não pode conter simbolos além do underline(_)"
<div class="errorMessage">
<img src="erroricon.png" class="errorIconImage">
<label class="fieldErrrorMessage">O campo de login não pode conter simbolos além do underline(_)</label>
</div>
*No errorMessage acima do botão, dento dentro do label você vai colocar "O campo de email não pode conter simbolos além do underline(_)"
<div class="errorMessage">
<img src="erroricon.png" class="errorIconImage">
<label class="fieldErrrorMessage">O campo de Email não pode conter simbolos além do underline(_)</label>
</div>
E verificar o se o campo de senha tem 8 caracteres, iremos copiar a div errorMessage igual fezemos no email e login, mas iremos modificar umas coisas, porque neste caso iremos exibir uma mensagem e depos que o campo de senha estiver os 8 caracteres ou mais, a mensagem irá sumir, neste caso iremos substituir o nome "error" por "warning" e colocar a mensagem "A senha precisa ter 8 caracteres ou mais" no label e colocar embaixo do input da senha
assim:
<div class="WarningMessage">
<img src="Warningicon.png" class="warningIconImage">
<label class="fieldWarningMessage">A senha precisa ter 8 caracteres ou mais</label>
</div>
então o código vai ficar assim:
Pronto você acabou de fazer a parte 1 de 3, você agora colocou a mensagem de campo vazio, caractere inválido e os números de caracteres necessários no html
Comentários
Postar um comentário