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

Validação de formulários II

Por Philipe Cardoso
Categoria: Tecnologia
dez 28th, 2009
0 Comentários
291 Views

No artigo Validação de formulários simples, demonstrei o funcionamento básico de uma validação de formulários em Javascript. Nesse artigo pretendo me aprofundar mais no assunto, criando validações mais complexas.

Para começar, vamos restringir quais campos do formulário são obrigatórios. Há várias formas de fazer isso. Para fins didáticos criaremos uma validação baseada no atributo HTML class. Dessa forma, podemos limitar quais elementos serão inclusos na validação a partir da classe.

Para obter o atributo class de um elemento, basta utilizar a propriedade className. Exemplo:

onload=function(){
    var elemento=document.getElementById("id_do_elemento")
    alert("A classe é: " + elemento.className)
}

À princípio, bastaria uma simples comparação do tipo “if(classe==’abc’)”. Mas devemos atentar para o fato de que um elemento pode participar de várias classes simultaneamente. Uma verificação mais rigorosa torna-se necessária.

Criaremos uma função PertenceClasse para fazer essa verificação. Lembrem-se de que as classes são separadas por espaços (” “). Dessa forma, para guardarmos as classes em um array basta utilizarmos o método split da classe String. Segue o código da nossa função:

function PertenceClasse(elemento, nome_classe) {
    var elemento_classes = elemento.className.split(" ") //Array de classes
    for (var i = 0; i < elemento_classes.length; i++) {
        if (elemento_classes[i] == nome_classe) {
            return true //Encontramos a classe
        }
    }
    return false //Não encontramos a classe
}

Para complicar um pouco mais, ao invés de validar os campos do formulário que pertencem à classe “obrigatorio”, vamos procurar os elementos “label” que pertencem a essa classe e verificar a qual campo estão relacionados (atributo for).

Também vamos utilizar CSS para formatar a página e utilizar elementos pertencentes a várias classes (apenas para confirmar que a função “PertenceClasse” funciona corretamente).

O código de nossa página pode ficar dessa forma:




Informações pessoais
Contato
Finalizar
Os campos marcados com * são obrigatórios

Precisaremos de uma função “FiltraObrigatorio”, que recebe um vetor de elementos <label> e retorna os campos do formulário relacionados aos label’s (apenas os pertencentes à classe “obrigatorio”). Segue o código da função:

function FiltraObrigatorio(elementos, nome_tag) {
    //Variáveis
    var retorno = [] //array que iremos retornar
    var campo_formulario //campo do formulário ao qual o label está associado
    //Percorre os campos
    for (var i = 0; i < elementos.length; i++) {
        //Verifica se o elemetno pertence à classe "obrigatorio"
        if (PertenceClasse(elementos[i], "obrigatorio")) {
            //Campo do formulário (elemento cujo id é o atributo "for" do label)
            campo_formulario = document.getElementById(elementos[i].getAttribute("for"))
            //Verifica se o campo realmente existe
            if (campo_formulario) {
                //Verifica se a variável "nome_tag" é válida
                if (nome_tag) {
                    /* Se tiver um valor, devemos verificar se
                    corresponde à tag do campo do formulário */
                    if (campo_formulario.tagName.toString().toUpperCase() == nome_tag.toString().toUpperCase()) {
                        retorno.push(campo_formulario)
                    }
                } else {
                    /*Se não tiver um valor, entendemos que
                    não existe restrição quanto à classe*/
                    retorno.push(campo_formulario)
                }
            }
        }
    }
    //Retorno da função
    return retorno
}

Notas:

  • O método push, em array’s, insere os parâmetros passados à função nas últimas posições. É possível inserir vários valores de uma só vez passando vários parâmetros à função. Exemplo:
    vetor.push(a,b,c)
  • O método toString força a transformação da variável numa string
  • O método toUpperCase, em strings, a deixa em caixa alta. Foi utilizado porque a comparação de strings é case sensitive.

Poderíamos deixar a função ValidaElementos intacta, mas vamos acrescentar algumas funcionalidades. Podemos modificar o fundo do elemento de acordo com a validação:

  • Se é inválido, vermelho;
  • Se é válido, verde.

O novo código da função pode ficar assim:

function ValidaElementos(campos, valor_invalido) {
    //Variávei que indica sucesso na validação
    var validado = true
    //Percorre os elementos e verifica se está tudo OK
    for (var i = 0; i < campos.length; i++) {
        //Verifica se o valor do elemento é inválido
        if (campos[i].value == valor_invalido) {
            //Seta a variável "validado" como false, indicando erro
            validado = false
            //Modifica o estilo do campo para indicar erro
            campos[i].style.backgroundColor = "#f00" //vermelho
        } else {
            //Modifica o estilo para indicar que está OK
            campos[i].style.backgroundColor = "#0f0" //verde
        }
    }
    //Retorna sucesso (true) ou erro (false)
    return validado
}

Por fim, o código que faz a validação no evento onsubmit do formulário:

onload = function () {
    document.getElementById("formulario").onsubmit = function () {
        //Lista de labels
        var lista_label = this.getElementsByTagName("label")
        var campos_invalidos = []
        //Validamos os input's
        var lista_input_obrigatorio = FiltraObrigatorio(lista_label, "input")
        if (!ValidaElementos(lista_input_obrigatorio, "")) {
            campos_invalidos.push("Caixas de texto")
        }
        //Valida os select's
        var lista_select_obrigatorio = FiltraObrigatorio(lista_label, "select")
        if (!ValidaElementos(lista_select_obrigatorio, "invalido")) {
            campos_invalidos.push("Caixas de seleção")
        }
        //Veriifca se ocorreram problemas na validação
        if (campos_invalidos.length) {
            var mensagem_alerta = "Preencha os seguintes campos:"
            for (var i in campos_invalidos) {
                mensagem_alerta += "\n* " + campos_invalidos[i]
            }
            alert(mensagem_alerta);
            return false
        }
    }
}

Nota:

O loop do tipo for(variavel in vetor) percorre todos os elementos do vetor.

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.

Deixe uma resposta

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