Validação de formulário simples | Zoom Digital : Reviews de Smartphones, Tutoriais, Notícias

Validação de formulário simples

Por Philipe Cardoso
Categoria: Tecnologia
dez 4th, 2009
2 Comments
388 Views

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.

About "" Has 2042 Posts

23 anos, Carioca, Criador do Portal Zoom Digital, mantém desde a epoca que possuia formato de blog, Podcaster oficial do Zoom Cast. Amante por todo tipo de tecnologia e formado como técnico de informática.

2 Responses to “Validação de formulário simples”

  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 *