Ir para conteúdo
Fórum Script Brasil
  • 0

(Resolvido) Validação de Campos Obrigatórios sem a utilização de IDs

Amanda Makino

Perguntado por Amanda Makino,

 Share

Pergunta

Amanda Makino

Amanda Makino

Postado
Postado (editado)

Caros,

estou aqui tentando implementar um modo de validação de campos obrigatórios que seja genérico.

Pois este deverá ser utilizado por todas as páginas do ERP que estamos desenvolvendo.

Cada página de cadastro deverá ter o seguinte funcionamento:

- No submit do form, verificar se os campos obrigatórios foram preenchidos pelo usuário.

- Caso um ou mais campos não tenham sido preenchidos:

- Uma mensagem dizendo "Existem campos obrigatórios não preenchidos." deverá aparecer ao lado do botão salvar.

- Também deverá aparecer uma imagem de um "X" em vermelho do lado de cada campo não preenchido.

- Após o usuário preencher esses campos e clicar em salvar novamente:

- A mensagem some e no lugar dos "X", aparecerá uma imagem de certo.

Bem, eu consegui implementar isso no meu componente! O que eu fiz:

- Coloquei duas imagens (uma a de erro ('X') e a outra de ok) pra cada input obrigatório.

- Coloquei um ícone de erro e um output com a mensagem de erro ao lado do botão salvar e setei os dois como display:none.

- No onsubmit do form chamo a seguinte função: 

function ValidarCamposObrigatorios()
        {    
            var qtdErros = 0;

            if(document.getElementById('cadastrar:formCadastro:codigo').value == ""){
                qtdErros += 1;
                document.getElementById('cadastrar:formCadastro:imgCodigoErro').style.display = 'inline';
                document.getElementById('cadastrar:formCadastro:imgCodigoOk').style.display = 'none';                
            } else {
                document.getElementById('cadastrar:formCadastro:imgCodigoErro').style.display = 'none';
                document.getElementById('cadastrar:formCadastro:imgCodigoOk').style.display = 'inline';
            }
            
            if(document.getElementById('cadastrar:formCadastro:descricao').value == ""){
                qtdErros += 1;
                document.getElementById('cadastrar:formCadastro:imgDescricaoErro').style.display = 'inline';
                document.getElementById('cadastrar:formCadastro:imgDescricaoOk').style.display = 'none';
            }else {
                document.getElementById('cadastrar:formCadastro:imgDescricaoErro').style.display = 'none';
                document.getElementById('cadastrar:formCadastro:imgDescricaoOk').style.display = 'inline';
            }
            
            if(document.getElementById('cadastrar:formCadastro:percentualAcrescimo').value == ""){
                qtdErros += 1;
                document.getElementById('cadastrar:formCadastro:imgPercentualErro').style.display = 'inline';
                document.getElementById('cadastrar:formCadastro:imgPercentualOk').style.display = 'none';
            }else {
                document.getElementById('cadastrar:formCadastro:imgPercentualErro').style.display = 'none';
                document.getElementById('cadastrar:formCadastro:imgPercentualOk').style.display = 'inline';
            }
            if(qtdErros > 0){
                document.getElementById('cadastrar:formCadastro:msgErroObrigatorio').style.display = 'inline'
                document.getElementById('cadastrar:formCadastro:imgErro').style.display = 'inline';
                return false;
            }else {
                document.getElementById('cadastrar:formCadastro:msgErroObrigatorio').style.display = 'none'
                document.getElementById('cadastrar:formCadastro:imgErro').style.display = 'none';
                return true;
            }            
        }
** Nota: Os controles estão dentro de dois namecontainers (o subview('cadastrar') e o form('formCadastro')). Por isso esses ids com nome estranho do lado do cliente! >.< Aquie está o print do componente em funcionamento: validacaosg9.jpg Agora vamos às questões: - Como generalizar essa função para que todas as páginas possam utilizá-las, sendo que a função: - não sabe os id dos controles da página chamadora. - não sabe quais dos controles são obrigatórios. (a única diferença entre um controle simples de um controle de preenchimento obrigatório, é que o obrigatório setamos a propriedade 'required' como true, vejam: 
<h:panelGrid columns="3">				
			<h:inputText id="descricao" value="#{descontoVencimentoBean.descontoVencimento.descricao}" style="width:475px;" 
				required="true" styleClass="caixatextoCadastro" maxlength="50"/> 
			<h:graphicImage id="imgDescricaoErro" value="#{msgs['imagem-validar-erro']}" style="display: none;"/>
			<h:graphicImage id="imgDescricaoOk" value="#{msgs['imagem-validar-ok']}" style="display: none;"/>					
		</h:panelGrid>

Bom, a idéia que tive primeiramente, foi que cada página passasse os ids dos campos obrigatórios por parâmetro,

e na função, eu percorreria esses parâmetros (não sei se é possível).

Mas já logo desisti... pois... imaginem só uma página de cadastro com 100 campos... passar parâmetro por parâmetro...

E ainda explicar para o pessoal que o id deverá ser "nomeSubView:nomeForm:nomeControle". ><'

Então pensei em percorrer todos os inputs e verificar um por um se é obrigatório.

Porém não tenho idéia de como fazê-lo.. =/

Por isso resolvi postar essa dúvida aqui... e aí?! Alguém tem uma luz?! :unsure:

Editado por Amanda Makino
Link para o comentário
Compartilhar em outros sites

15 respostass a esta questão

Posts Recomendados

  • 0
Jonathan Queiroz

Jonathan Queiroz

Postado
Postado

Para pegar todos os elementos do formulário, você deve utilizar um loop !

O seu formulário ficaria assim:

<form name="formulario" id="formulario" action="" method="post" onsubmit="return Verifica(this.id)">
E o seu JavaScript ficaria assim: 
function Verifica(id) {
formulario = document.getElementById(id)
for (i=0;i<=formulario.lenght;i++) {
elemento = formulario.elements[i]
if (elemento.value=="") {
alert("O campo " + elemento.name + " não pode ficar em branco !")
return false;
break;
}
}
}

Tente assim !

É só adaptar o código e qualquer coisa postar aqui !

Link para o comentário
Compartilhar em outros sites
  • 0
Amanda Makino

Amanda Makino

Postado
  • Autor
Postado (editado)

Jonathan, muito obrigada por responder! ^^

Então... acontece que antes de verificar se o elemento está vazio (if (elemento.value=="")),

eu tenho que verificar se o elemento é obrigatório,

porque se ele não for, não posso exibir essa mensagem ao usuário, né?!

Também não posso colocar break no for...

pois a idéia é exibir a imagem de erro ("X") em todos os elementos que não foram preenchidos... e não somente em um..=/

Bom, primeiramente...

o maior problema é que não estou conseguindo verificar se a propriedade required do elemento é true ou false.

Nem sei se isso é possível... :(

Ah... só uma dúvida:

Além desses inputs do tipo text, também terei combos nos formulários.

Posso utilizar essa mesma verificação (if (elemento.value=="")) para as combobox também?!

Editado por Amanda Makino
Link para o comentário
Compartilhar em outros sites
  • 0
Jonathan Queiroz

Jonathan Queiroz

Postado
Postado
Posso utilizar essa mesma verificação (if (elemento.value=="")) para as combobox também?!
Não !

A validação nesse caso seria diferente !

o maior problema é que não estou conseguindo verificar se a propriedade required do elemento é true ou false.

Como assim propriedade required ?

Tem outra forma, mas daria muito mais trabalho !

Você criaria um campo hidden com o mesmo nome do elemento e algo para indentificar...

Exemplo: Para o campo "telefone", o hidden seria "telefone_hidden"...

E nesse campo você colocaria os valores "true" quando for obrigatório e "false" quando não for !

Link para o comentário
Compartilhar em outros sites
  • 0
Gigabyte

Gigabyte

Postado
Postado (editado)

Olá Amanda...

Eu tenho no meu sistema um validador de forms genérico que funciona muito bem.

Eu criei uma classe que indica os campos obrigatórios com um outline nesses elementos.

O loop ficaria assim:

formulario = document.getElementById("nome_do_formulario");
for (x in formulario.elements)
{
  el = formulario.elements[x];
  if (el.type == "submit"/*[... mais validações de objetos de formulário]*/){
    if (el.className == "nome_da_classe_indicativa_de_obrigatoriedade"){
      if(el.value == ""){
        // Aqui vai qualquer ação após identificar o campo obrigatório sem preenchimento!!!
      }
    }
  }
}
O único problema fica por conta dos checkboxes e radio, que precisam de um tratamento diferenciado, mas é possível fazer. E no meu caso, ao invés de utilizar identificação gráfica (ícones), mudei a classe do objeto, colocando um outline vermelho pra indicar o objeto sem preenchimento, coloco o foco no primeiro que está em não conformidade e retorno o false na execução da função. Caso necessite, posso passar o código que utilizo atualmente, mas é bem interessante fazer o seu baseado nas informações, para que você possa personalizá-lo da maneira adequada. Ah.. a propósito, ao invés de carregar esse monte de ícones de "ok" e "X", caso você queira continuar com esse tipo de feedback, utilize a notação: 
img = "<img src='sua_imagem.extensão'>"
  el.parentNode.insertAfter(img,el);

Ou algo assim.....

Editado por Gigabyte
Link para o comentário
Compartilhar em outros sites
  • 0
Amanda Makino

Amanda Makino

Postado
  • Autor
Postado
Como assim propriedade required ?

Tem outra forma, mas daria muito mais trabalho !

Você criaria um campo hidden com o mesmo nome do elemento e algo para indentificar...

Exemplo: Para o campo "telefone", o hidden seria "telefone_hidden"...

E nesse campo você colocaria os valores "true" quando for obrigatório e "false" quando não for !

Então... o "required" é um dos atributos do input que estou utilizando, veja:

<h:inputText id="descricao" value="#{descontoVencimentoBean.descontoVencimento.descricao}" style="width:475px;"

required="true" styleClass="caixatextoCadastro" maxlength="50"/>

Mas não tinha pensado em fazer uma classe que indicasse os campos obrigatórios!

Realmente foi uma grande idéia essa do Gigabyte.

Muito obrigada, Gigabyte! ;)

Vou tentar implementar suas idéias!

Realmente... nossa...ia ser muito menos trabalhoso mudar a classe do que trabalhar com todos esses ícones! ><'

Mas é que foi a proposta mais aceita entre a equipe... aí não posso passar por cima..

O que farei será implementar os dois modos... aí a gente faz uma outra votação..

Nossa, mas vlw, mesmo!! Abriu meus olhos... achava que a solução não seria fácil..hehe!

Bem, vou tentar... se der certo, eu posto aqui!!

Obrigada novamente! ;)

E Jonathan, muito obrigada por sua atenção também! ^_^

Vlw, meninos!!! ;)

Ah.. a propósito, ao invés de carregar esse monte de ícones de "ok" e "X", caso você queira continuar com esse tipo de feedback, utilize a notação:

img = "<img src='sua_imagem.extensão'>"
  el.parentNode.insertAfter(img,el);

Ou algo assim.....

Gigabyte, muito obrigada!

Não conhecia essa notação!

Irei utilizá-la,sim! Com certeza!!!

Vlw mesmo! ^_^

Link para o comentário
Compartilhar em outros sites
  • 0
Gigabyte

Gigabyte

Postado
Postado

Então Amanda....

Se quiser conhecer mais sobre as propriedades e funções do HTML DOM, sugiro a utilização do Firefox com o complemento Firebug, que inspeciona um elemento e exibe na sua tab DOM essas interações.... vale a pena explorar!

comprovante0223dec0842qs2.th.jpg

Thanks to ImageShack for Free Image Hosting

Link para o comentário
Compartilhar em outros sites
  • 0
Amanda Makino

Amanda Makino

Postado
  • Autor
Postado (editado)

Bem, "resolvi"(em partes) o que eu queria fazer...

Coisas que não deram certo:

- Percorrer os elementos do form dessa forma: 

for (x in formulario.elements) {
}
- Utilizar a notação: 
el.parentNode.insertAfter(img,el);
Soluções: - Recuperei o array de inputs presentes na página e os percorri: 
var inputs = document.getElementsByTagName('input');
for (x in inputs) {
}
- No HTML DOM não existe insertAfter, somente insertBefore... Então fiz a seguinte função: 
function insertAfter(newElement,targetElement){  
    var parent = targetElement.parentNode;  
    if (parent.lastChild == targetElement) {  

        parent.appendChild(newElement);  

    } else {  
        parent.insertBefore(newElement,targetElement.nextSibling);  
    }  
}
E a chamo da seguinte forma dentro do for dos inputs: 
for (x in inputs) {
     input = inputs[x];
     // insere a imagem de erro ao lado da caixa de texto.
     insertAfter(imgInputErro, input);
}
E então deu certo! Agora adiciono dinamicamente minhas imagens de erro e de Ok em frente aos inputs! :) Minha função: 
function ValidarCamposObrigatorios(){
    var inputs     = document.getElementsByTagName('input'); 
        var textareas  = document.getElementsByTagName('textarea');
        var combos     = document.getElementsByTagName('select');
    var qtdErros = 0;
    
    // Percorre os inputs da tela verificando a obrigatoriedade.
    for (x in inputs) 
    {
        var imgInputOk = document.createElement('img');
        imgInputOk.setAttribute('src', '/lanfredi/imagens/validar_ok.gif');
        imgInputOk.setAttribute('id', 'imgInputOk');
        
        var imgInputErro = document.createElement('img');
        imgInputErro.setAttribute('src', '/lanfredi/imagens/validar_erro.gif');
        imgInputErro.setAttribute('id', 'imgInputErro');
        
        input = inputs[x];
        
        // Verifica se o input é obrigatório.
        if (input.className == "caixatextoCadastroObrigatorio") {
            if(input.value == ""){
                qtdErros += 1;
                
                // insere a imagem de erro ao lado da caixa de texto.
                insertAfter(imgInputErro, input);

                // coloca o foco no primeiro campo obrigatório não preenchido.
                if(qtdErros == 1)
                    input.focus();
            }else
                // insere a imagem de ok ao lado da caixa de texto.
                insertAfter(imgInputOk, input);
        }    
    }
        return false;
}
O problema: - Bem, o problema é que a função vai adicionando as imagens, sem remover as que já estavam sendo mostradas ao usuário. Portanto, se o usuário clicar em salvar sem preencher o campo 'código', a imagem de erro é criada (Perfeito!). Porém quando ele preenche o código e clica em salvar novamente, a imagem de ok é criada, ao lado da de erro, sem a substituir, olhem só: validacaoerrons5.jpg Tentei remover as imagens da seguinte forma dentro do for: 
imgARemover = (document.getElementById('imgInputErro') != null) ?
                 document.getElementById('imgInputErro') :
                 document.getElementById('imgInputOk');
                        
if(imgARemover != null)
    input.parentNode.removeChild(imgARemover);

Mas não dá certo... a função acaba dando um submit no form e fechando o meu modal panel... :(

E então?! Alguém tem alguma idéia de como resolver isso?

vlw! ;)

Editado por Amanda Makino
Link para o comentário
Compartilhar em outros sites
  • 0
Gigabyte

Gigabyte

Postado
Postado

Oi Amanda...

Desculpa pelo insertAfter, é que eu tenho justamente uma função como a sua que eu chamo e uso o insertBefore... rsrs!

Quanto às imagens, creio que o ideal seria remover todas antes de rodar a validação ou revalidação....

function removeIMGs(){
  imgs = form.getElementsByTagName("IMG");
  for (x in imgs){
    if (imgs[x].id == "imgInputErro" || imgs[x].id == "imgInputOk"){
      imgs[x].parentNode.removeChild(imgs[x]);
    }
  }
}

Link para o comentário
Compartilhar em outros sites
  • 0
Amanda Makino

Amanda Makino

Postado
  • Autor
Postado (editado)

Oi, Gigabyte.

Hahaha! Tudo bem...

Foi só eu pesquisar um pouquinho e já me veio a solução do insertAfter...

O que importa é a idéia, né?! ^^

rs

Então, Giga.. vlw!!

Deu certo.. está removendo agora...

Mas...rsrs...

Parece que ao remover as imagens, acontece um submit no form...

a função é chamada novamente... só que o meu modal é fechado... ¬¬

Minha função pra teste:

function ValidarCamposObrigatorios(form){
    alert('Entrou na Função ValidarCamposObrigatorios');
    var inputs     = document.getElementsByTagName('input');      
    var imgs        = document.getElementsByTagName("img");
    
    // Remove as imagens que já estavam sendo mostradas.
    for (w in imgs) {
        if (imgs[w].id == "imgInputErro" || imgs[w].id == "imgInputOk")
            imgs[w].parentNode.removeChild(imgs[w]);
    }
        
    // Inicia form.
    var qtdErros = 0;
    
    // Percorre os inputs da tela verificando a obrigatoriedade.
    for (x in inputs) 
    {
        var imgInputOk = document.createElement('img');
        imgInputOk.setAttribute('src', '/lanfredi/imagens/validar_ok.gif');
        imgInputOk.setAttribute('id', 'imgInputOk');
        
        var imgInputErro = document.createElement('img');
        imgInputErro.setAttribute('src', '/lanfredi/imagens/validar_erro.gif');
        imgInputErro.setAttribute('id', 'imgInputErro');
        
        input = inputs[x];
        
        // Verifica se o input é obrigatório.
        if (input.className == "caixatextoCadastroObrigatorio") {
            if(input.value == ""){
                qtdErros += 1;
                
                // insere a imagem de erro ao lado da caixa de texto.
                insertAfter(imgInputErro, input);

                // coloca o foco no primeiro campo obrigatório não preenchido.
                if(qtdErros == 1)
                    input.focus();
            }else
                // insere a imagem de ok ao lado da caixa de texto.
                insertAfter(imgInputOk, input);
        }    
    }
}

Veja só a seqüência de acontecimentos:

sequenciamd7.jpg

- 1º quadro: apareceu depois que cliquei em salvar.

- 2º quadro: foi depois que eu cliquei no Ok do primeiro alert a aparecer. (Procedimento normal até aí)

- 3º quadro: apareceu após eu ter clicado em salvar novamente.

- 4º quadro: apareceu após ter clicado no Ok do segundo alert a aparecer.

Depois de ter clicado no Ok do alert que apareceu no 4º quadro...

Acontece o submit e o meu form é fechado... :(

Editado por Amanda Makino
Link para o comentário
Compartilhar em outros sites
  • 0
Gigabyte

Gigabyte

Postado
Postado

Hummm.....

Onde você está executando a chamada da função de validação??

Sugestão: caso seja direto no onsubmit do form, coloca no final o seguinte teste:

if (qtdErros > 0){
  return false;
}else{
  return true;
}
E o seu form ficaria assim... 
<form name="djsfhajksh" action="fasdkl" onsubmit="java script:ValidarCamposObrigatorios(this)">

Link para o comentário
Compartilhar em outros sites
  • 0
Amanda Makino

Amanda Makino

Postado
  • Autor
Postado (editado)

Ahh então...

Eu já faço isso... é que não postei a função inteira..

Segue a função inteira:

function ValidarCamposObrigatorios(form){
    alert('Entrando na Função ValidarCamposObrigatorios...');
    CaixaAlta();
    
    var inputs     = document.getElementsByTagName('input');      
    var imgs        = document.getElementsByTagName("img");

    var qtdErros = 0;
    
    alert('Entrando no for de imagens...');
    
    // Remove as imagens que já estavam sendo mostradas.
    for (w in imgs) {
        if (imgs[w].id == "imgInputErro" || imgs[w].id == "imgInputOk") {
            alert('Removendo imagem');
            imgs[w].parentNode.removeChild(imgs[w]);
        }
    }
    
    alert('Saindo do for de imagens...');
    
    // Percorre os inputs da tela verificando a obrigatoriedade.
    for (x in inputs) 
    {
        var imgInputOk = document.createElement('img');
        imgInputOk.setAttribute('src', '/lanfredi/imagens/validar_ok.gif');
        imgInputOk.setAttribute('id', 'imgInputOk');
        
        var imgInputErro = document.createElement('img');
        imgInputErro.setAttribute('src', '/lanfredi/imagens/validar_erro.gif');
        imgInputErro.setAttribute('id', 'imgInputErro');
        
        input = inputs[x];
        
        // Verifica se o input é obrigatório.
        if (input.className == "caixatextoCadastroObrigatorio") {
            if(input.value == ""){
                qtdErros += 1;
                
                // insere a imagem de erro ao lado da caixa de texto.
                insertAfter(imgInputErro, input);

                // coloca o foco no primeiro campo obrigatório não preenchido.
                if(qtdErros == 1)
                    input.focus();
            }else
                // insere a imagem de ok ao lado da caixa de texto.
                insertAfter(imgInputOk, input);
        }    
    }

    var nameContainer = form.id + ':';
    
    alert(qtdErros);
    
    if(qtdErros > 0){
        document.getElementById(nameContainer + 'msgErroObrigatorio').style.display = 'inline';
        document.getElementById(nameContainer + 'imgErro').style.display = 'inline';            
        return false;
    }else {
        document.getElementById(nameContainer + 'msgErroObrigatorio').style.display = 'none';
        document.getElementById(nameContainer + 'imgErro').style.display = 'none';
        return true;
    }
}
Segue a chamada: 
<h:form id="formCadastro" onsubmit="return ValidarCamposObrigatorios(this);">

Bom, coloquei 5 alerts no meio da função... pra analisar o que está acontecendo..rsrs

- Um para me mostrar quando a execução chama a minha função.

- Um para me mostrar quando a execução entra no for de imagens

- Um para me mostrar quando a execução remove uma imagem.

- Um para quando ela sai do for de imagens

- Um para me mostrar a quantidade de erros

Ok..

Na primeira vez que tento salvar sem preencher nada, é exibido pra mim:

- Entrando na Função ValidarCamposObrigatorios...

- Entrando no for de imagens...

- Saindo do for de imagens...

- 3.

Na segunda vez que tento salvar sem preencher nada, é exibido pra mim:

- Entrando na Função ValidarCamposObrigatorios...

- Entrando no for de imagens...

- Removendo imagem

- Removendo imagem

- Removendo imagem

- Entrando na Função ValidarCamposObrigatorios...

- Entrando no for de imagens...

E então dou ok... e pronto... meu modal some! Não sei porque...

Será que não tá renderizando as imagens?!

Inexplicável... ><'

O duro é que teve uma vez que executei.. e que deu certo!!!!

Fez tudo certinho!!! Mas isso foi depois de umas dez vezes que deu errado... =/

Não sei o que fazer... :(

Editado por Amanda Makino
Link para o comentário
Compartilhar em outros sites
  • 0
Amanda Makino

Amanda Makino

Postado
  • Autor
Postado

Aeeeee!! Enfim, resolvido! Gambiarras pra que te quero!!!!!

\o/

rsrs...

Como o meu problema é que no submit automático (executado após remover as imagens do form),

a execução entrava no for de imagens e não saía...

Fiz o seguinte...

Coloquei um hidden com valor igual a true na minha página...

E então eu verifico o valor dele... só entro no for se ele for true...

if(auxiliar.value == 'true')
    {
        // Remove as imagens que já estavam sendo mostradas.
        for (w in imgs) {
            if (imgs[w].id == "imgInputErro" || imgs[w].id == "imgInputOk")
            {
                imgs[w].parentNode.removeChild(imgs[w]);
                auxiliar.value = 'false';
            }
        }
    }
Após remover, seto o hidden como false, pra que a execução não entre no for denovo... Pulado o for... ele vai pro fim da função.. onde seto o hidden como true. 
auxiliar.value = 'true';
    
    if(qtdErros > 0){
        document.getElementById(nameContainer + 'msgErroObrigatorio').style.display = 'inline';
        document.getElementById(nameContainer + 'imgErro').style.display = 'inline';            
        return false;
    }else {
        document.getElementById(nameContainer + 'msgErroObrigatorio').style.display = 'none';
        document.getElementById(nameContainer + 'imgErro').style.display = 'none';
        return true;
    }

pronto... deu certo! HUSAHUAS!

Nem acredito! rs \o/

Bom, mais uma vez... vlw, Giga!!!

Se não fosse você.. não sairia nada!! hehe!! Vlw! ;)

Ufa!

Link para o comentário
Compartilhar em outros sites
  • 0
Gigabyte

Gigabyte

Postado
Postado (editado)

Ok, ok!!!

O negócio é mudar a forma de remover as imagens, pois ao remover, estava dando erro no for.....

// Remove as imagens que já estavam sendo mostradas.
    while(img = document.getElementById("imgInputErro")) {
        img.parentNode.removeChild(img);
    }
    while(img = document.getElementById("imgInputOk")) {
        img.parentNode.removeChild(img);
    }
Sugiro que ao menos enquanto estiver em fase de testes, utilize: 
function blablabla()
{
  try{
  // ações da função
  }catch(erro){alert(erro);}
}

Ah.... sem gambiarras!

Editado por Gigabyte
Link para o comentário
Compartilhar em outros sites
  • 0
Amanda Makino

Amanda Makino

Postado
  • Autor
Postado

Poxa, vlw, Giga!!

Deu certo!

E sem gambiarras! hahaha! ^^

Vlw mesmo!!

E vlw pelo toque do try catch... realmente... uma mão na roda! xD

Abraço! o/

function ValidarCamposObrigatorios(form){

    var qtdErros = 0;
    
    var inputs     = document.getElementsByTagName('input');      

    // Remove as imagens que já estavam sendo mostradas.
    while(img = document.getElementById("imgInputErro")) {
        img.parentNode.removeChild(img);
    }
    while(img = document.getElementById("imgInputOk")) {
        img.parentNode.removeChild(img);
    }        
    
    // Percorre os inputs da tela verificando a obrigatoriedade.
    for (x in inputs) 
    {
        var imgInputOk = document.createElement('img');
        imgInputOk.setAttribute('src', '/lanfredi/imagens/validar_ok.gif');
        imgInputOk.setAttribute('id', 'imgInputOk');
        
        var imgInputErro = document.createElement('img');
        imgInputErro.setAttribute('src', '/lanfredi/imagens/validar_erro.gif');
        imgInputErro.setAttribute('id', 'imgInputErro');
        
        input = inputs[x];
        
        // Verifica se o input é obrigatório.
        if (input.className == "caixatextoCadastroObrigatorio") {
            if(input.value == ""){
                qtdErros += 1;
                
                // insere a imagem de erro ao lado da caixa de texto.
                insertAfter(imgInputErro, input);

                // coloca o foco no primeiro campo obrigatório não preenchido.
                if(qtdErros == 1)
                    input.focus();
            }else
                // insere a imagem de ok ao lado da caixa de texto.
                insertAfter(imgInputOk, input);
        }    
    }

    if(qtdErros > 0){
        document.getElementById(form.id + ':' + 'msgErroObrigatorio').style.display = 'inline';
        document.getElementById(form.id + ':' + 'imgErro').style.display = 'inline';            
        return false;
    }else {
        document.getElementById(form.id + ':' + 'msgErroObrigatorio').style.display = 'none';
        document.getElementById(form.id + ':' + 'imgErro').style.display = 'none';
        return true;
    }    
}

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.

×
 Share
Ir para lista de Perguntas


  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,3k
×
×
  • Criar Novo...