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:
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.
