Primeiras aulas do curso JavaScript na Web: validação de Formulários e HTML5

JavaScript na Web: validação de Formulários e HTML5

Validação com HTML - Apresentação

Olá, meu nome é Matheus e serei o seu instrutor durante todo o curso de JavaScript na Web: Validação de Formulários e HTML5. Nos dedicaremos a um projeto chamado “Doguito Pet Shop” temos duas páginas para trabalhar.

Uma página vai ser a página de cadastro de pessoa. Então, quando a pessoa for entrar na Pet Shop e quiser se cadastrar para poder comprar produtos ou ver notícias, por exemplo, ela vai ter que fazer passar por esse formulário de cadastro. E nós vamos validar esse formulário, nós vamos utilizar HTML puro, vamos utilizar atributos que já existem dentro do próprio HTML para fazer validações básicas e até avançadas desses campos, como, por exemplo, nome, e-mail e senha. E depois nós vamos criar variações customizadas com JavaScript.

Então, por exemplo, data de nascimento, vamos criar uma validação de idade para saber se a pessoa é menor de idade ou não para se cadastrar no site. E nós vamos chegar até fazer requisições para as outras APIs, como é o caso do CEP, por exemplo, preenchendo um CEP ele vai preencher os outros campos de endereço automaticamente.

E nós vamos ver também como utilizar máscaras para nossa validação do formulário. Então na outra página que nós temos para trabalhar, que vai ser a página administrativa de cadastro de produto, nós vamos aprender a utilizar máscara monetária. Como nós vamos importar essa máscara, onde pegar essa máscara e também como configurar para usar de acordo com o que nós precisamos. Então fique comigo durante todo esse curso que nós vamos aprender bastante.

Validação com HTML - Atributos de validação

Nós vamos participar do processo desenvolvimento do projeto Doguito Pet Shop, mais especificamente na parte de cadastro, na forma de cadastro do projeto.

Você deve ter encontrado em alguns outros sites, quando você vai completar algum tipo de cadastro, um formulário bem parecido com esse que está na tela. Então teremos campos com, por exemplo, nome, email, senha, data de nascimento, CPF, e assim por diante. Nosso trabalho nesse formulário será validá-lo.

Então, esse formulário tem todas essas informações, mas existe um porém. Se eu não preencher nenhuma informação desse formulário e tentar cadastrá-lo, ele permite. Não existe nada no projeto que impeça a pessoa de enviar um formulário vazio.

Então nós não podemos deixar isso acontecer, nós temos que validar o formulário e impedir que a pessoa envie o formulário vazio. E o HTML trouxe algumas ferramentas que vão nos ajudar nessa parte de validação.

Então a primeira validação que nós vamos fazer aqui vamos fazer vai ser o campo nome para garantir que esse campo seja preenchido. Para isso nós vamos utilizar o atributo required. Então eu vou para o meu editor de texto, eu estou usando o “Visual Studio Code”, vou procurar onde está o input do nome, está na linha 27, e no final desse input eu vou adicionar o atributo required. Salvei meu documento, voltei para o para navegador.

E agora se eu tentar enviar esse formulário sem preencher nenhuma informação, ele aparece uma mensagem de erro, “Please fill out this field”. Bom, vale notar que a minha mensagem apareceu em inglês e isso é porque meu navegador foi instalado em inglês. Então se estiver em português, ele vai estar escrito em português, em inglês vai estar escrito em inglês. Mas o importante aqui é que está escrito “por favor preencha esse campo”. Então vamos preencher esse campo.

O nome é Matheus, preenchi o nome Matheus, vou tentar cadastrar agora. Foi sem nenhum problema.

O próximo campo vai ser de e-mail, então vamos colocar, por exemplo, que o meu e-mail vai ser matheus. Porém, matheus não é um endereço de e-mail válido, eu não coloquei “@” e um serviço de e-mail, Yahoo, UOL e assim por diante. Eu só coloquei matheus. Isso não é e-mail válido. Só que se eu tentar cadastrar o meu formulário, ele vai.

Então nós vamos utilizar outra ferramenta do HTML para validar esse campo, que é o atributo type, mais especificamente o valor do atributo type vai ser e-mail.

Voltando para o editor de texto, e onde está o input de e-mail, eu vou trocar o type = “text” que nós colocamos por padrão quando nós utilizamos o input para type= “email”, aproveitar também e colocar o atributo required, porque nós queremos também que esse campo seja obrigatório o preenchimento.

Salvei o meu documento HTML, voltei para a minha página, recarreguei. Então vamos lá preencher. Meu nome é Matheus e meu e-mail vai ser só matheus. E agora se eu tentar validar esse formulário, enviar esse formulário, ele vai falar assim: “por favor inclua o ‘@’ para poder fazer estrutura do endereço de e-mail.”

Então vale notar que, na verdade, ele não está checando se o serviço de e-mail realmente existe, a checagem que o HTML vai fazer aqui é exatamente se a estrutura está correta, ou seja, o endereço de e-mail, arroba, o serviço de e-mail. Então vou colocar, por exemplo, “@email.com”. Então agora se eu tentar fazer o cadastro do formulário, ele vai.

Então agora nos resta o campo de senha. Nós podemos fazer o que já fizemos em outros campos, colocar o atributo required e alterar o atributo type para algum valor, por exemplo, senha ou password. Então vamos alterar para o editor de texto, o campo de senha está na linha 37, vamos adicionar o atributo required e também trocar o type= “text” para type= “password”.

Voltei para o meu navegador, recarreguei, vou preencher no nome Matheus, e-mail é “matheus@email.com”, e agora minha senha. Nós colocamos o atributo type= “password”, mas agora a pergunta é o que seria uma senha válida? Porque nós não definimos nada do que nós consideramos uma senha válida.

O que o atributo type vai fazer para nós é simplesmente esconder o que é digitado dentro do campo de senha, então ele vai ficar ou uma bola, uma estrela, ou algum outro tipo sobre a escrita do que vai aparecer na tela, isso também vai variar bastante de navegador para navegador, mas não está realmente validando o que está escrito no nosso campo de senha.

Então se eu digitar qualquer coisa nesse campo, independente se é maiúsculo, minúsculo ou número, ele vai cadastrar sem problemas. Então que nós podemos fazer, por exemplo, para poder fazer algum tipo de validação para a senha, é colocar um valor mínimo de caracteres. Então a pessoa tem que escrever no mínimo “x” caracteres para poder tornar uma senha válida.

E nós vamos fazer isso utilizando o atributo minlength. Então voltei para o meu editor de texto, o input de senha está na linha 37, e vou adicionar o atributo minlength= “”, e eu coloco um valor dentro das aspas, por exemplo, 6 caracteres. Então agora minha senha precisa ter, no mínimo, 6 caracteres para poder ser válida.

Então vamos voltar para o nosso navegador, recarreguei a página, nome é Matheus, o e-mail é “matheus@email.com”, minha senha agora vai ser, por exemplo, 123. Ou seja, ela é abaixo da quantidade que nós colocamos dentro do atributo minlength. Então vamos ver o que acontece agora se nós tentarmos cadastrar. A mensagem está escrito “Por favor, alongue esse texto para que contenha 6 caracteres ou mais”.

Então agora ele já está impedindo que a pessoa envie uma senha com um número de caracteres muito baixo. Vou colocar aqui 123456, vou tentar cadastrar agora, funcionou. Então, agora nós vamos ver outras maneiras para validar esse campo de senha.

Validação com HTML - Regex para senhas

Para validar esse campo de senha nós utilizamos o atributo minlength para poder dizer a quantidade mínima de caracteres nós queremos ter no campo de senha. Nós utilizamos o valor 6, então nossa tem que ter no mínimo 6 caracteres para poder ser uma senha válida.

Mas hoje em dia vários sites têm requerimento de senha diferentes. Então, por exemplo, nós podemos colocar uma senha que tenha pelo menos um caractere maiúsculo, um número, não contenha símbolos. E esse requerimento pode variar de site para site. No nosso caso do Doguito Pet Shop nós vamos utilizar justamente pelo menos 1 letra maiúscula, 1 letra minúscula, 1 número e também não deve conter nenhum tipo de símbolo.

Como nós vamos fazer isso, será que existe algum tipo de atributo para cada requisição, para cada validação específica do campo. Por exemplo, se nós quisermos que nossa senha contenha pelo menos um número, tem um atributo chamado at least one number, ia ficar um pouco complexo, nós adicionarmos muitos atributos dentro do nosso input, ia ficar muito complexo para o HTML tomar conta de todas essas validações.

Então para isso nós vamos utilizar uma outra ferramenta do HTML chamado pattern, o atributo pattern. E dentro do pattern nós vamos escrever uma expressão regular, ou uma regEx. Então dentro dessa regEx nós vamos escrever o que nós queremos, o que nós esperamos do padrão escrito dentro do campo de senha.

Para escrever uma regEx é necessário ter um pouco de conhecimento da linguagem. Então a minha recomendação, eu fortemente recomendo a você fazer, caso você não tenha essa experiência com regEx, é procurar algum exemplo na internet e depois alterar para a necessidade que você espera.

Então vou usar como exemplo, vou abrir uma nova aba no Google, dar um zoom na minha página, e vou procurar no Google por “password regex”. E vão existir vários exemplos que a comunidade vai escrevendo na internet. Um site eu gosto de usar para esse tipo de coisa é a “regexlib” que a comunidade escreve vários exemplos de expressões regulares aqui.

Então eu peguei um para senhas, então nós temos senhas que servem para pelo menos um número, contém letras maiúsculas, alguns também não contém símbolos, assim por diante. O que eu fazer aqui, eu já tenho uma regEx escrita, com a necessidade que nós precisamos para a validação desse campo de senha.

Eu vou pegar minha cola, onde já tem a regEx escrita, copiar e vou colar dentro do atributo pattern do campo de senha. E outra coisa legal também de se usar regEx, ou expressões regulares, é que nós podemos também, além de colocar letras maiúsculas, minúsculas, colocar esse padrão esperado, nós também podemos colocar tamanho mínimo esperado da senha e tamanho máximo esperado da senha sem que nós precisamos utilizar os atributos minlength ou então maxlength.

Podemos apagar esse atributo minlength, e colocar apenas o pattern, e dentro do pattern nós vamos colar nossa expressão regular. Só que agora eu vou quebrar com você o que é essa expressão regular, o que está escrito, o que está fazendo, como é que funciona. Então eu vou no final meu código, eu vou colar e vou dar um pouco de zoom para nós focarmos bem na expressão regular.

Os primeiros e últimos símbolos dessa expressão regular significam até onde nós queremos checar esse padrão, então o acento circunflexo e o sinal de dólar eles vão dizer que nós queremos que esse espectro de caracteres seja validado, sigam a regra que nós estamos escrevendo. E dentro desses dois símbolos nós temos conjuntos de regras delimitados por parênteses. Então nós temos 4 conjuntos de regras, formados por parênteses.

Então vamos analisar o primeiro “?=”, quando nós começamos com interrogação igual nós estamos dizendo que nós permitimos a presença de certos caracteres. O ponto está dizendo que todos os caracteres são permitidos menos quebra de linha, ou seja, entres para garantir que não existe nenhuma quebra de linha dentro do campo. O asterisco serve para dizer que contenha pelo menos um desses caracteres, e entre colchetes nós colocamos o intervalo de caracteres que nós queremos que sejam válidos permitidos. No caso aqui, nós temos “a-z”, ou seja, de a até z minúsculos.

A próxima regra que nós temos, de novo “?=”, ou seja, nós permitimos esses caracteres, o ponto está dizendo que todos os caracteres são permitidos, menos quebra de linha, e o asterisco para conter pelo menos 1 desses caracteres. E dentro de colchetes o intervalo de caracteres que nós queremos. Que é de A até Z, mas agora maiúsculos.

Na nossa terceira regra é a mesma coisa. Permitimos caracteres que não tenham quebra de linha, contém pelo menos 1 desses caracteres, e de 0 a 9, ou seja, pelo menos o numeral.

E por último, nós temos a nossa última regra, nosso último conjunto de regras, que começa agora com ?!. Então se “?=” quer dizer que é permitido, “?!” quer dizer que não é permitido. Nós não permitimos o uso desses caracteres, qualquer caractere é permitido, menos quebra de linho e agora com asterisco também que contenha pelo menos um desses caracteres.

E agora que caracteres são esses, dentro de colchetes, nós não colocamos intervalo porque intervalo de caracteres especiais pode ser diferente, dependendo da tabela de caracteres que nós estamos usando. Então nós vamos colocar na mão todos os caracteres que nós não queremos permitir, que não são permitidos dentro do campo de senha. Portanto, espaço, !, @, #, $, %, e assim por diante. Nós vamos colocar todos os caracteres que não serão permitidos dentro do campo.

Acabou isso, e agora vamos à parte extra da regEx. Então depois de todos esses conjuntos de regras fora de parêntesis, nós temos um “.{6,12}”. Isso quer dizer que nós queremos que nosso campo tenha entre 6 a 12 caracteres, nós estamos limitando o tamanho e também pedindo que tem um valor mínimo de caracteres. Então o ponto é somente para dizer que é a quantidade de caracteres, ai entre chaves “6,12”, ou seja, 6 caracteres pelo menos e até no máximo 12.

Eu vou apagar essa linha 86, voltar o zoom como estava antes, e vou salvar meu documento, deixa eu ver se está aqui nossa regEx, está aqui, vou salvar. Então agora vou para o navegador, voltar para o formulário, recarreguei a página, então vamos lá. Matheus é meu nome, meu e-mail é “matheus@email.com”, e agora minha senha eu vou colocar “123”.

Se eu tentar cadastrar agora, ele apareceu “Por favor, escreva no formato pedido esperado”. Realmente eu coloquei só 3 caracteres, nós precisamos de pelo menos 6. Então vou colocar “123456”, tentar cadastrar de novo, não foi ainda porque faltou uma letra minúscula e uma letra maiúscula. Eu vou colocar uma letra minúscula e uma maiúscula. Se eu tentar cadastrar agora, funciona.

Só para um último teste, eu vou colocar que “123456”, minúsculo, maiúsculo e agora eu vou colocar um símbolo, por exemplo, “=”. Vamos ver se vai, não foi, então o nosso regEx está funcionando perfeitamente. Só como uma brincadeira, vou apagar o símbolo e vou ultrapassar os 12 caracteres, cadastrar. Ok, então está funcionando perfeitamente nossa expressão regular.

Porém, tem um detalhe, quando eu coloquei para cadastrar a mensagem de erro estava simplesmente escrito “por favor escreva no formato esperado”. Só que a pergunta é, nós sabemos qual é o formato esperado, mas para quem não sabe qual que é esse formato esperado, aparece essa mensagem de erro. A pessoa pode pensar: “como eu devo escrever essa senha? Como deve ser o padrão esperado pela senha?”.

Então, a mensagem está muito genérica, e nós vamos melhorá-la Para isso nós não utilizamos tributo title. Então dentro do nosso documento, do nosso editor de texto, no final da linha 37, depois do atributo pattern, eu vou adicionar o atributo title, e dentro de title agora eu vou escrever a mensagem explicando qual que seria o padrão esperado pelo campo de senha. Portanto, “A senha deve conter entre 6 a 12 caracteres, deve conter pelo menos uma letra maiúscula, um número e não símbolos”.

Salvei meu documento, voltei para o navegador, vamos preencher novamente, o nome é Matheus, meu e-mail é “matheus@email.com”, e agora minha senha eu vou colocar só “123”, só para nós podermos ver a mensagem de erro. Então cadastrei e ele fala “Por favor, complete conforme o formato esperado”, mas agora tem uma descrição do que é o formato esperado, então “A senha deve conter entre 6 a 12 caracteres, deve conter pelo menos uma letra maiúscula, um número e não deve conter símbolos”.

Agora ficou muito mais fácil para a pessoa entender como que é o formato esperado, ao invés de adivinhar o que é esperado no formulário. Então, nós conseguimos validar o campo de nome, o campo de e-mail e o campo de senha. O próximo passo será validar a próxima sessão que é de informações pessoais.

Sobre o curso JavaScript na Web: validação de Formulários e HTML5

O curso JavaScript na Web: validação de Formulários e HTML5 possui 126 minutos de vídeos, em um total de 42 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!

Plus

  • Acesso a TODOS os cursos da plataforma

    Mais de 1200 cursos completamente atualizados, com novos lançamentos todas as semanas, em Programação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.

  • Alura Challenges

    Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.

  • Alura Cases

    Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.

  • Certificado

    Emitimos certificados para atestar que você finalizou nossos cursos e formações.

  • Alura Língua (incluindo curso Inglês para Devs)

    Estude a língua inglesa com um curso 100% focado em tecnologia e expanda seus horizontes profissionais.

12X
R$85
à vista R$1.020
Matricule-se

Pro

  • Acesso a TODOS os cursos da plataforma

    Mais de 1200 cursos completamente atualizados, com novos lançamentos todas as semanas, em Programação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.

  • Alura Challenges

    Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.

  • Alura Cases

    Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.

  • Certificado

    Emitimos certificados para atestar que você finalizou nossos cursos e formações.

  • Alura Língua (incluindo curso Inglês para Devs)

    Estude a língua inglesa com um curso 100% focado em tecnologia e expanda seus horizontes profissionais.

12X
R$120
à vista R$1.440
Matricule-se
Conheça os Planos para Empresas

Acesso completo
durante 1 ano

Estude 24h/dia
onde e quando quiser

Novos cursos
todas as semanas