A chave para melhores resultados de pesquisa na busca móvel: 10 dicas rápidas
10 dicas para melhores resultados na busca em dispositivos móveis
2 de agosto de 2017
Blogs de WordPress que você precisa conhecer
9 de agosto de 2017

Validar um formulário com JavaScript

Fala galera! Hoje iremos validar um formulário com JavaScript puro.

Sim, existem plugins que fazem isso, com o Jquery Validator – recomendo o artigo do Devmedia sobre ele – que fazem isso muito bem. Mas existe uma gama de desenvolvedores que aconselha a não utilização de frameworks e bibliotecas quando o problema pode ser resolvido com o código puro. Eu sempre fui daqueles que procuravam soluções prontas para os problemas do dia a dia (como validar um formulário), mas depois que comecei a pensar e estudar sobre os argumentos dessa galera, passei a correr atrás de resolver as coisas com JavaScript puro.

Se te interessar, saca o que andam dizendo:

Chegou aqui mas não manja muito de JavaScript? Considere ler o artigo abaixo:

Fundamentos de JavaScript – parte 1

Validar um formulário com JavaScript

Então vamos lá. Meu exemplo é parte de um projeto no qual estou trabalhando… Se trata de uma aplicação de cadastro histórias e contos. O código abaixo é usado junto com o framework Bootstrap, mas usaremos apenas a camada de CSS dele (então não precisaremos do JQuery).

O que fazemos é de certa maneira simples. Todas as regras de validação foram inseridas dentro da função validaHistoria. Para cada campo do formulário foi criada uma variável que recebe o valor do formulário. Este valor é capturado através do método getElementById, que recebe o valor existente na tag HTML que contém o id referenciado no método.

var titulo_historia = document.getElementById(“titulo_historia”); -> a variável titulo_historia recebe o valor do campo input com id titulo_historia

Depois usamos uma estrutura condicional para verificar se o campo está vazio. Se estiver, usamos o método innerHTML para inserir na div com id titulo_warning um bloco de código HTML informando que o campo está vazio e orientando o usuário à preencher o campo. Essa mensagem está dentro de uma tag p que contém as classes alert e alert-danger do Bootstrap, que estilizam a mensagem para que ela se destaque e o usuário a perceba.

Os demais campos seguem o mesmo padrão de validação (no próximo artigo veremos validar campos com expressões regulares). As únicas exceções são as validações da classificação e da categoria da história, que usam checkbox e select respectivamente. Para validar o checkbox acrescentamos checked ao id que precisa ser verificado (lembrando que cada “input type=radio” precisa ter um id). Como são dois campos, concatenamos  com os operadores de comparação and (e) – &&.

if (document.getElementById(“classificacao_historia1”).checked == “” && document.getElementById(“classificacao_historia2”).checked == “”)

Para validar o select, assessamos o options do select e verificamos se nenhum campo foi selecionado com selectedIndex.

if (categoria_historia.options[categoria_historia.selectedIndex].value == “” )

E chegamos ao fim

Com essa estrutura você pode verificar se os campos input, checkbox, select e text-area estão ou não preenchidos. No próximo artigo desta série validaremos um formulário de login utilizando expressões regulares. Espero que o conteúdo seja útil para você.

Ah, se possível da uma força compartilhando nas redes sociais. Abraços e até a próxima!

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *