Primeiras aulas do curso Validação com JavaScript e HTML5: boas práticas de UX

Validação com JavaScript e HTML5: boas práticas de UX

Como validar campos utilizando atributos do HTML5 - Introdução

Meu nome é Samuel e nesse curso nós vamos aprender como fazer a validação de formulário com JavaScript e com HTML. Nós vamos utilizar o HTML para as coisas que ele consegue validar e o JavaScript para as coisas que o HTML não dá conta. E essas coisas são regras de negócio no geral.

Nós vamos trabalhar com dois formulários. Um deles é para cadastro de usuário para plataforma da casa do código, então são escritores e editores. Então temos algumas regras de negócio como a pessoa tem que ser maior de 18 anos, ela tem que ter um endereço e tem que ter um CPF válido. Essas coisas o HTML não trata então nós vamos ter que utilizar JavaScript.

E nós temos também um cadastro de produtos com preço, nome e descrição. E aqui nós temos mensagens de erro, temos uma máscara com uma mensagem de erro também, bibliotecas terceiras que nós estamos utilizando e estamos aplicando o conceito de conexão com APIs externas.

Então temos um CEP que funciona com uma API externa pública, que puxa o logradouro, puxa a cidade. Então é um curso bem completo, bem legal de aprender. Você pode aplicar isso para N formulários, N linguagens. Então é muita teoria e muita coisa prática.

Como validar campos utilizando atributos do HTML5 - Validando e-mail e senha com HTML5

Hoje nós vamos ver a questão de validação de e-mail e senha dentro do formulário da casa do código. Então temos esse formulário para cadastro de usuário que é para cadastrar os escritores e editores da casa do código.

Temos algumas informações aqui dentro. Temos e-mail, senha, informações pessoais e endereço e quando o escritor e a pessoa que for escrever um livro ou alguma coisa, for se cadastrar na plataforma pela primeira vez, ele vai dar de cara com esse formulário e vai vir aqui e preencher as coisas. Mas vamos imaginar que no pior dos casos ele não queira preencher nada e queira cadastrar o usuário mesmo assim.

Se ele clicar hoje aqui do jeito que está, ele vai vir aqui, cadastrar o usuário e o usuário foi cadastrado com sucesso. Apesar de ser só uma brincadeira, isso é algo muito sério. Pode ser um problema se eu não tiver nenhuma validação do lado do front end. Se eu tiver validações do lado do back end é uma parte importante, mas o front é a conexão que você tem com o usuário.

Então é melhor que você dê uma boa experiência para ele no momento que ele estiver se cadastrando. E a primeira parte de uma boa experiência é ele saber o que necessário e o que não é. Então o e-mail é necessário. Nós colocamos um texto para guiar o usuário no momento que ele estiver se cadastrando. Nós colocamos esse textinho do lado do label do e-mail e o cara sabe que é esse input que ele tem que preencher para fazer o cadastro.

Só que no momento ele não está configurado dessa forma. Isso porque o nosso código ainda está cru, não tem nada de validação. Nós temos o formulário, temos os inputs mas nenhuma validação aqui dentro. Então nós vamos colocar a primeira validação que é para inputs necessários. Então para isso nós vamos usar uma tag, um atributo de uma tag do HTML chamado required.

Nós vamos colocar esse required dentro do e-mail por enquanto e isso vai dizer para o HTML, para o formulário em si, que quando o usuário clicar no botão do submit, que é o nosso cadastrar usuário, vai entrar dentro desse formulário, passar por cada um dos inputs e vai ver se tem alguma validação. Na primeira que ele bater ele vai falar: “isso tem que ser validado”. Então isso é um required, ele é necessário, é um campo necessário e precisa ter alguma coisa dentro.

Eu não estou especificando o quê, só estou dizendo que é qualquer coisa. Então se eu der um cadastrar usuário agora, vai aparecer esse erro dentro do e-mail e vai falar “preencha esse campo para mim”. Vou preencher. Vou colocar só um K e vou dar cadastrar usuário. E ele foi cadastrado. Isso porque nós só colocamos a validação do que é necessário. Não dissemos mais nada para ele. Não falamos que isso aqui é um e-mail, não falamos que isso é uma senha, não falamos mais nada. Nós só falamos que isso é necessário.

Se ele tiver colocado qualquer coisa dentro pode validar e bola para frente. Então tem algumas outras coisas dentro do HTML que nós podemos trabalhar, alguns atributos dentro do input que podemos trabalhar e colocar dentro deles para podermos fazer essa validação da melhor forma possível dentro do front sem avançarmos muito e ter muita complexidade. O HTML5 é bem forte nisso. Então no e-mail nós vamos usar um outro atributo chamado type.

E dentro desse type temos diversos tipos de inputs que o HTML5 fornece, mas nós vamos usar o type email porque isso é um e-mail e vamos usar o type email para poder fazer validações de e-mail. Então já salvei lá. Se eu vier e colocar um K novamente e cadastrar o usuário ele vai falar “você tem que colocar um arrouba pelo menos para parecer um e-mail”. Então eu vou colocar um e-mail. Você ganhou de mim. Coloquei um e-mail e agora eu vou cadastrar o usuário. Beleza, cadastrou, validou o e-mail.

Eu já coloquei a primeira informação útil dentro desse formulário. Mas nenhuma outra informação eu estou colocando. A senha que eu preciso também não está validando, não tem nada. Nós vamos fazer a mesma coisa, vamos colocar o required dentro do input da senha e vamos colocar um tipo que é o type password. Tudo em inglês porque o HTML5 funciona dessa forma.

Então se eu coloco type password, ele vai verificar lá dentro das engrenagens internas do HTML que isso é um tipo de senha e agora se eu digitar alguma coisa ele já sabe que coisa ele já sabe que isso é um tipo senha. Então ele até já está até escondendo o que eu estou digitando. Se eu tirar isso, salvar e for colocar meu e-mail novamente, eu vou digitar, ele aparece. Então o que esse type está fazendo? Ele está escondendo a senha dentro do input.

Vou colocar o e-mail e uma senha, qualquer coisa. Vou colocar uma senha pequena. Vou eu colocar um, dois, três e vou dar cadastrar usuário. Legal, ele já está cadastrando muito bem. Já está funcionando bem. A senha está indo bem, o e-mail também. Então está indo legal, mas vamos dizer que o negócio, a casa do código está pedindo que a senha tem que ser pelo menos com 4 caracteres.

Então eu vou usar um outro atributo aqui dentro que é o minlength e vou colocar que é quatro. Isso porque dentro do type password ele ainda entende que isso aqui é um texto. Então estou dizendo para esse input que eu recebo textos, que esse input é necessário e que a menor quantidade de caracteres que eu aceito é 4.

Eu vou salvar. Vou colocar o e-mail de novo. Vou colocar um, dois, três porque eu não quero mudar a senha. Vou dar cadastrar usuário e ele vai colocar: “aumente este texto para 4 caracteres ou mais”. No momento você está usando três. Três caracteres. Então vou colocar um, dois, três, quatro.

Cadastrar usuário. Usuário cadastrado com sucesso. Nós conseguimos cadastrar um usuário, colocamos as regras de negócio aqui dentro e agora o nosso formulário está um pouco melhor. Então já vamos colocar o required para todos os outros. Para a data de nascimento também. São todos necessários. Então já vamos colocar para todos.

Para o CPF, para o RG, para o CEP, logradouro, cidade, estado e vamos salvar. Se eu der cadastrar usuário ele pede o e-mail. Vou colocar um e-mail e uma senha que já sabemos que ele pede.

Se eu der um Enter ele pede a data de nascimento. A data de nascimento é necessária, então eu vou colocar. Não estou fazendo mais nenhuma validação, só estou vendo a parte do necessário ou não. Depois nós vamos entrar nas outras. Cadastrar usuário. Ele pede CPF, vou colocar o RG, o endereço, qualquer coisa, a cidade, o estado. Eu vou preencher e vou dar cadastrar usuário. Cadastrado com sucesso porque nós colocamos as validações aqui dentro e o usuário foi legal e preencheu tudo.

Então vocês sempre têm que pensar em formas de como fazer as suas regras de negócio serem validadas dentro do formulário da forma mais simples possível para que o usuário seja guiado de uma forma simples e fácil. Colocando os textos, colocando esse tipo de validação que aparece uma mensagem.

Como validar campos utilizando atributos do HTML5 - Validando data de nascimento com HTML5

Agora nós vamos aprender a trabalhar com datas. Então nesse formulário nós temos somente uma data de nascimento, um tipo data. Nós só temos um input que aceita data, que é a data de nascimento. Esse formulário é bem simples. Nós vamos fazer alguma validação ou alguma coisa simples para trabalhar com isso.

Mas pode ter casos onde você precise de datas específicas, trabalhar com algumas coisas. Nesse primeiro momento nós vamos trabalhar só com a data de nascimento e a validação, porque se o usuário agora quiser digitar isso, funciona. Então agora eu vou preencher as outras informações. Vou colocar qualquer coisa nelas.

Vou dar cadastrar usuário e ele cadastra o usuário com sucesso. Mas não é o ideal deixarmos livre para o usuário colocar o que ele quiser porque ele pode digitar qualquer coisa e ele vai se cadastrar. E isso não está certo. A data de nascimento dele tem que ser uma data. Tem que ser algo mais próximo ou muito próximo disso, com barras ou hífens ou algo com que estejamos habituados.

Para que quando passarmos isso para frente, para um back end ou para alguém que vai trabalhar com esse dado, salvar no banco de dados, ele possa salvar de uma forma simples e que os nossos sistemas Windows, Mac, nossas linguagens de programação possam entender. Se mandar um dezembro de 97, ninguém vai entender o que está acontecendo aqui porque é um texto.

Não funciona dessa forma. Então para isso o HTML5 disponibiliza um atributo que nós vamos colocar dentro do input de data de nascimento. Então eu tenho um input data de nascimento e vou colocar um type. Nós já temos um required e eu vou colocar um type date. Vou salvar. Esse type date diz que é uma data e já aparece para ele algumas coisas que ajudam o usuário.

Então dd de dia, mm de mês e aaaa de ano. Alguns botões que podem ajudar. Ele pode ter esse calendário, pode clicar e selecionar o ano e pode navegar por aqui da forma mais simples. E o mais importante é que isso já formata para ele da forma que nós precisamos. Então ele não vai mandar um dezembro. Nem consegue, nem vai aparecer aqui um dezembro 97.

Ele pode mandar qualquer coisa aqui dentro. Então 18/12/1997 que é o ano que eu nasci. Vou preencher. A senha é qualquer coisa, o CPF e o RG. Dá um cadastrar usuário e ele cadastra com sucesso. Legal. Nós já melhoramos um pouco o formulário, mas ainda não está ideal. Isso porque eu posso colocar 18/12/1800.

Obviamente não nasci nesse ano. E ele vai se cadastrar com sucesso. Só que não é isso que nós queremos. Nós queremos uma pessoa que tenha menos de 100 anos. Talvez uma pessoa de 105 anos possa escrever um livro. Acho difícil, mas isso pode acontecer. Então nós colocamos uma validação para datas maiores que 1901, por exemplo, que é muito comum na maioria dos sites.

Então vamos utilizar um atributo, min. E uma coisa muito importante é que não vamos colocar nesse formato. Por exemplo, eu quero que seja 1901. Eu colocaria 01/01/1901. Por quê? Porque o HTML5 trabalha com as próprias ferramentas dele. Essa é a nossa forma de enxergar as datas no sistema brasileiro. Na maioria dos sistemas.

Mas por exemplo, nos Estados Unidos ele olham primeiro o mês, se não me engano. Eles colocam o mês, o dia e o ano. Alguma coisa assim. Mas é diferente de nós. E o HTML5 trabalha de uma outra forma. Ele trabalha com hifens, não são nem barras, então começa com ano, trabalha com hifens, é outro jeito de trabalhar, mas é a forma que ele entende e é a forma que temos que fazer.

É a forma como ele foi desenvolvido. Então temos que começar com o ano, 1901-01-01. Então eu estou falando que a data mínima para alguém colocar aqui dentro é 01/01/1901. Se for antes disso ele não deixa. Então eu vou colocar 18/12/1900. Vou colocar o CPF e o RG e vou dar um cadastrar usuário. Opa. Ele me apresentou um erro. Aqui são as validações do HTML.

Ele fala que tem que ser depois de 1901. Então vamos dizer que é dia 01/02/1901. Dá um cadastrar usuário. Usuário cadastrado com sucesso. Então se colocar qualquer outra data antes disso, ele não vai. Isso é muito bom pra nós porque conseguimos com uma maneira simples e rápida falar que queremos uma data mínima para a pessoa não colocar datas absurdas de nascimento.

Então aqui você pode aumentar, colocar 1910, 1920, enfim você pode delimitar da forma que você quiser. Na data de nascimento nem tanto. Nós não temos tanto essa questão de regra e tal. É bom você colocar uma idade, um certo range de uma idade mas para trabalhar com outros tipos de data ou outras informações que você precisa, talvez seja interessante você colocar idades mínimas menores, 2000 ou alguma coisa assim. Depende do negócio que você estiver montando.

Sobre o curso Validação com JavaScript e HTML5: boas práticas de UX

O curso Validação com JavaScript e HTML5: boas práticas de UX possui 108 minutos de vídeos, em um total de 39 atividades. Gostou? Conheça nossos outros cursos de JavaScript em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

Aprenda JavaScript acessando integralmente esse e outros cursos, comece hoje!

  • 1222 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

Premium

  • 1222 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$75
à vista R$900
Matricule-se

Premium Plus

  • 1222 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$100
à vista R$1.200
Matricule-se

Max

  • 1222 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$120
à vista R$1.440
Matricule-se
Procurando planos para empresas?

Acesso completo por 1 ano

Estude 24h/dia onde e quando quiser

Novos cursos todas as semanas