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

(Resolvido) Validar formulario javascript

dinohills

Perguntado por dinohills,

 Share

Pergunta

dinohills

dinohills

Postado
Postado (editado)

Boa tarde, estou tentando validar um formulario usando javascript. Neste formulario eu tenho 3 checkbox com as name:

id

marcado

marcado

O que eu gostaria de fazer era obrigar o usuário a marcar pelo menos uma check box com o nome (marcado) e também não deixar que fique selecionado as duas checkbox (marcado).

Eu fiz o script pra validar, mas o que acontece é que ele so esta considerando a primeira checkbox (marcado) as demais ele não verifica.

Vou postar o exemplo aqui

<html><head>
        <title></title>
        &lt;script language="JavaScript" type="text/javascript">
            function validar(){
                var opcao = document.teste.marcado;
                for(i=0; i < opcao.length; i++ ){
                    if(opcao[i].checked == false){
                        alert('selecione uma opção');
                        return false;
                    }else{
                        return true;
                    }
                }
            }            
        </script>
    </head>
    <body>
        <form name="teste" onsubmit="return validar();" action="#">
            ID
            <input type="checkbox" name="id" id="1"/>
            Opção 1
            <input type="checkbox" name="marcado" id="1"/>
            Opção 2
            <input type="checkbox" name="marcado" id="1"/>
            <br/><br/>
            ID
            <input type="checkbox" name="id" id="2"/>
            Opção 1
            <input type="checkbox" name="marcado" id="2"/>
            Opção 2
            <input type="checkbox" name="marcado" id="2"/>
            <br/><br/>
            ID
            <input type="checkbox" name="id" id="3"/>
            Opção 1
            <input type="checkbox" name="marcado" id="3"/>
            Opção 2
            <input type="checkbox" name="marcado" id="3"/>
            <br/><br/>
            <input type="submit" value="OK"/>
        </form>
    </body>
</html>

Parece que no "for" que eu uso no script para quando encontra uma ocorrência falsa e não continua verificando as outras checkbox.

Mas se você marca logo a primeira ele consegue validar semproblemas.

Bom se alguém caso alguém saiba o que estou fazendo de errado porfavor poste ai. VLW!!!

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

8 respostass a esta questão

Posts Recomendados

  • 0
Stoma

Stoma

Postado
Postado (editado)

O que está acontecendo é que o for da sua função validar começa no checkbox 0 (que é o segundo checkbox da primeira linha), e caso ele não esteja ativado ele já dá o alerta, sendo que ele deveria verificar todos antes... e caso ele esteja ativado já dá o return e sai da função sem continuar verificando os outros checkbox.

Porque você não utiliza radio button ao invés de checkbox? Por padrão, eles já funcionam do jeito que você precisa... ficaria assim:

<html><head>
        <title></title>
        <script language="JavaScript" type="text/javascript">
            function validar(){
                var selecionado;
                var opcao = document.teste.marcado;
                
                for(i=0; i < opcao.length; i++ ){
                    if(opcao[i].checked == true){
                        selecionado = true;
                    }
                }
                if(!selecionado){
                    alert("Selecione um opção!");
                    return false;
                }
            }            
        </script>
    </head>
    <body>
        <form name="teste" onsubmit="return validar();" action="#">
            ID
            <input type="radio" name="id" id="1"/>
            Opção 1
            <input type="radio" name="marcado" id="1"/>
            Opção 2
            <input type="radio" name="marcado" id="1"/>
            <br/><br/>
            ID
            <input type="radio" name="id" id="2"/>
            Opção 1
            <input type="radio" name="marcado" id="2"/>
            Opção 2
            <input type="radio" name="marcado" id="2"/>
            <br/><br/>
            ID
            <input type="radio" name="id" id="3"/>
            Opção 1
            <input type="radio" name="marcado" id="3"/>
            Opção 2
            <input type="radio" name="marcado" id="3"/>
            <br/><br/>
            <input type="submit" value="OK"/>
        </form>
    </body>
</html>

Com radios só é possível selecionar 1 opção para cada name, e como existem 9 radios e 3 deles tem name=id, você só poderá selecionar UM desses três, e os outros estão todos com o mesmo name=marcado, então você só poderá selecionar UM entre os 6. Caso queira selecionar mais, é só alterar os names's dos botões...

Qualquer dúvida diz ae

Editado por Stoma
Link para o comentário
Compartilhar em outros sites
  • 0
dinohills

dinohills

Postado
  • Autor
Postado
O que está acontecendo é que o for da sua função validar começa no checkbox 0 (que é o segundo checkbox da primeira linha), e caso ele não esteja ativado ele já dá o alerta, sendo que ele deveria verificar todos antes... e caso ele esteja ativado já dá o return e sai da função sem continuar verificando os outros checkbox.

Então "stoma" é que eu estou usando um script para desativar todas as outras checkbox caso uma checkbox da linha esteja marcada ficando somente as checkbox da linha liberada e quando você desmarca as checkbox ele libera o resto.

Vo estudar aqui pra ver se consigo usa o radio button.

Mas o que eu gostaria de entender mesmo é o porque desse for não verifica tudo.

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

Stoma

Postado
Postado (editado)

Vamos ver se consigo explicar o problema deste for:

var opcao = document.teste.marcado;
                for(i=0; i < opcao.length; i++ ){
                    if(opcao[i].checked == false){
                        alert('selecione uma opção');
                        return false;
                    }else{
                        return true;
                    }
                }

Na primeira linha deste código você passa o(s) elemento(s) 'marcado' para a opcao. Até aí tudo bem...

Na primeira iteração do for, você declara i=0 e i é menor que opcao.length (que é 6)... aí é feito if(opcao[0].checked==false) e tomadas as decisões. Então se o primeiro checkbox não estiver marcado, a função entra no bloco dentro do IF, dá o alerta e já retorna false, caso esteja marcado, ele irá para o bloco do ELSE e já retorna true.

Quando uma função encontra o return, ela retorna o que tem que retornar e já para a execução da função, mesmo que tenha mais código abaixo da linha do return ou esteja dentro de um laço.

E é aí que está o problema, se a primeira opção não estiver selecionada, ele dá o alerta e já vai pro return false e para a execução da função. Caso esteja selecionado, retorna true e também para a execução da função, sem verificar os outros checkbox, mesmo que a condição i<opcao.length dor for ainda seja verdade...

Bem é isto... consegui explicar? ;S

Editado por Stoma
Link para o comentário
Compartilhar em outros sites
  • 0
dinohills

dinohills

Postado
  • Autor
Postado

Na primeira linha deste código você passa o(s) elemento(s) 'marcado' para a opcao. Até aí tudo bem...

Na primeira iteração do for, você declara i=0 e i é menor que opcao.length (que é 6)... aí é feito if(opcao[0].checked==false) e tomadas as decisões. Então se o primeiro checkbox não estiver marcado, a função entra no bloco dentro do IF, dá o alerta e já retorna false, caso esteja marcado, ele irá para o bloco do ELSE e já retorna true.

Quando uma função encontra o return, ela retorna o que tem que retornar e já para a execução da função, mesmo que tenha mais código abaixo da linha do return ou esteja dentro de um laço.

E é aí que está o problema, se a primeira opção não estiver selecionada, ele dá o alerta e já vai pro return false e para a execução da função. Caso esteja selecionado, retorna true e também para a execução da função, sem verificar os outros checkbox, mesmo que a condição i<opcao.length dor for ainda seja verdade...

Bem é isto... consegui explicar? ;S

Bom vlw ai "Stoma" conseguiu explicar sim.

Pelo que to vendo jeito de fazer ele verifica tudo não vai ter como né?

Bom agora eu dexei as opções de fora da tabela ai fica mais facil de trabalhar e também to usando radio button.

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

Rafael Laurindo

Postado
Postado

Isso aew. E como está usando radio, somente um resposta deve estar correta, nesse caso você deve agrupa-las, colocando o mesmo name em todas elas, na hora de submeter o form, somente um valor irá para ser processado no servidor.

Usa o Fedora né, isso aew, Red Hat na veia. Eu uso Ubuntu. Boa sorte aew.

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

Stoma

Postado
Postado

Tem com sim! Dentro do for ao invés de dar o return, você poderia guardar a quantidade de opções que foram selecionadas e após sair do for verificar se foi selecionada 0, 1 ou mais opções...

Ficaria desta forma:

<html><head>
        <title></title>
        <script language="JavaScript" type="text/javascript">
            function validar(){
                var opcao = document.teste.marcado;
                var marcados = 0;
                for(i = 0; i < opcao.length; i++ ){
                    if(opcao[i].checked == true){
                        marcados++;
                    }
                }
                if(marcados==0){
                    alert('selecione uma opção');
                    return false;
                }else if(marcados>1){
                    alert('selecione apenas uma opção');
                    return false;
                }else if(marcados==1){
                    return true;
                }
            }            
        </script>
    </head>
    <body>
        <form name="teste" onsubmit="return validar();" action="#">
            ID
            <input type="checkbox" name="id" id="1"/>
            Opção 1
            <input type="checkbox" name="marcado" id="1"/>
            Opção 2
            <input type="checkbox" name="marcado" id="1"/>
            <br/><br/>
            ID
            <input type="checkbox" name="id" id="2"/>
            Opção 1
            <input type="checkbox" name="marcado" id="2"/>
            Opção 2
            <input type="checkbox" name="marcado" id="2"/>
            <br/><br/>
            ID
            <input type="checkbox" name="id" id="3"/>
            Opção 1
            <input type="checkbox" name="marcado" id="3"/>
            Opção 2
            <input type="checkbox" name="marcado" id="3"/>
            <br/><br/>
            <input type="submit" value="OK"/>
        </form>
    </body>
</html>

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