Validação de formulário simples

Gearbest promoção de Junho no pt site promotion
[Review] Conheça o Motorola Dext por completo
03/12/2009
Kmess 2.X
04/12/2009

Validação de formulário simples

No artigo anterior, Javascript e eventos, expliquei a importância dos eventos para as linguagens client-side. Ter conhecimento dos eventos é fundamental para programar em Javascript. Nesse artigo, pretendo colocar em prática o conhecimento adquirido sobre eventos. Dessa forma, o aprendizado torna-se mais fácil. Note que a leitura do artigo anterior é recomendável para facilitar o entendimento nesse artigo. Utilizaremos o evento onsubmit para saber quando o formulário está sendo enviado. Muitas pessoas utilizam o evento onclick do botão de envio, mas isso não é recomendável (não explicarei o motivo nesse artigo). O código da nossa página, apenas para fins didáticos, pode ficar assim:

Informações pessoais
Contato
Finalizar
À princípio, poderíamos fazer uma validação com os elementos obtendo-os um a um a partir de seu atributo id. Nesse caso, nosso código poderia ficar assim:
onload = function () {
    document.getElementById("formulario").onsubmit = function () {
        if (document.getElementById("nome").value == "") {
            alert("Digite um nome !")
            return false
        } else if (document.getElementById("sobrenome").value == "") {
            alert("Digite um sobrenome !")
            return false
        } else if (document.getElementById("pais").value == "invalido") {
            alert("Digite um país !")
            return false
        }
    }
}
Nota:
  • Para obter o atributo value de um elemento, podemos utilizar a propriedade value (sério ??);
  • Ao retornar false para um evento (return false), o navegador não executa a ação padrão do evento (no nosso caso, enviar o formulário). É como se aquilo não tivesse acontecido.
No código continuaríamos com o if...else if para todos os elementos do formulário. No mínimo, trabalhoso. Felizmente, há outros recursos. Podemos utilizar o método getElementsByTagName do formulário, que retorna um array com todos os filhos do objeto cuja tag é igual à especificada como parâmetro. Por exemplo, document.body.getElementsByTagName("form") irá retornar todos os formulários (<form>) da página. Para quem não sabe o que é um array, recomendo a leitura desse artigo: CriarWeb - Arrays em Javascript. Poderíamos, então, aplicar essa técnica em nossa validação. O código ficaria parecido com esse:
document.getElementById("formulario").onsubmit = function () {
    var campos = this.getElementsByTagName("input")
    for (var i = 0; i < campos.length; i++) {
        if (campos[i].value == "") {
            alert("Preencha todos os campos de texto")
            return false
        }
    }
}
Notas:
  • O objeto this, quando utilizado em eventos, é o próprio elemento que sofreu a ação;
  • Em array's, a propriedade length pode ser utilizada para obter a quantidade de elementos.
O código ficou muito mais elegante, não ? Mas nos esquecemos de validar os elementos <select>. Por ironia do destino e para complicar a validação, esses são inválidos quando seu valor é "invalido", enquanto os <input> devem ter valor diferente de "". Ah, basta repetir o código e fazer pequenas alterações... Definitivamente não ! Podemos muito bem criar uma função que faça isso por nós e reutilizar o código. Eis o código da função:
function ValidaElementos(campos, valor_invalido) {
    for (var i=0;i
Nota:
O argumento valor_invalido nos será útil porque o critério para validação dos input's e select's é diferente.
E o código para o evento onload pode ficar assim:
onload = function () {
    document.getElementById("formulario").onsubmit = function () {
        if (!ValidaElementos(this.getElementsByTagName("input"), "")) {
            alert("Preencha todos os campos de texto")
            return false;
        }
        if (!ValidaElementos(this.getElementsByTagName("select"), "invalido")) {
            alert("Preencha todos os combos");
            return false;
        }
    }
}
Nota:
O operador ! (negação lógica) serve para inverter o valor de uma variável. Note que a função ValidaElementos retorna false (falso) no caso de a validação falhar, mas uma condição if só é executada se o resultado da operação for true (verdadeiro). Podemos, então, inverter o resultado com o operador !.
Para quem quiser, fica aí o código completo de nossa página:

    

Informações pessoais
Contato
Finalizar
Espero, em artigos futuros, ensinar a criar validações mais complexas e explicar o porquê de se utilizar o evento onsubmit do formulário ao invés do onclick de botões.
Philipe Cardoso
Philipe Cardoso
26 anos, Advogado, Carioca, Criador do Portal Zoom Digital, mantém desde a epoca que possuía formato de blog, Podcaster oficial do Zoom Cast. Amante por todo tipo de tecnologia.

2 Comentários

  1. […] This post was mentioned on Twitter by Zoom Digital, Ti Feed. Ti Feed said: Feed: Validação de formulário simples http://bit.ly/64w9Ex #Zoomdigital […]

  2. […] de formulários II No artigo Validação de formulários simples, demonstrei o funcionamento básico de uma validação de formulários em Javascript. Nesse artigo […]

Deixe uma resposta

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