(Resolvido) Validando grupos de radiobutons

postali · Julho 19, 2010

Olá Pessoal,

Vejam se podem me ajudar. Estou tentando validar alguns grupos de radiobutons e um campo somente text, exemplo de grupos de radios: "p1_eng, p2_com, etc..".

Estou usando um script que verifica se todos os campos do tipo radio e text estão vazios se estiverem da um alert para o usuário preencher os campos.

O script que estou usando a validação não é enviada, mesmo os campos estando preenchidos.

Meu objetivo era na frente de cada campo não preenchido eu ter um "*" monstrando para o usuário que os campos com o "*" não foram preenchidos. Porém nem a validação dos campos eu ainda não consegui...

Script:

function Valida(){
var controle = 0;
//var controle2 = 0;
    for (i=0;i<document.enquete.elements.length;i++){
        //if (document.enquete.elements[i].type == "radio"){
        if (document.enquete.elements[i].type == "radio" &&    document.enquete.elements[i].type == "text"){
        if (document.enquete.elements[i].checked == 0){
    controle++;
    
        }
        }
    }
    if (controle == 0){
        alert("Selecione uma das opções");
        return false;
    }
    
    //if (controle2 == 0){
        //alert (" O campo CPF não está preenchido!");
        //return false;
    //}
    else {
         enquete.submit();
    }
    
}

Se puderem me ajudar ficarei muito grato.

Valeu pessoal.!

Editado Abril 13, 2011 por *FIT*
Adicionar as tags [code]

Romero Dias · Julho 19, 2010

Postali,

Analisando seu código, percebi que você está fazendo uma verificação com if, e, sua comparação só vai retornar true se as duas condições forem verdadeiras.

Acredito que para o código funcionar, o bloco if deve retornar true se pelo menos uma das expressões for verdadeira,

Poque, um elemento do form não pode ser ao mesmo tempo do tipo radio e do tipo text, saco?

if (document.enquete.elements.type == "radio" || document.enquete.elements.type == "text"){

Não sei se vai funcionar, pois, acredito que um elemento do tipo text, não possui a propriedade checked, ou seja, não tem como comparar se elemento do tipo text está checked, saco?

Par verificar se um elemento do tipo text está preenchido, você tem que verificar se a propriedade value foi definida.

document.enquete.elements[i].value == ''

Para seu script funcionar, primeiro você deve verificar os elementos do tipo radio, se todos estiverem checked, então, depois verifica se os elementos do tipo texto foram preenchidos.

Faça um teste ai,

Abraço

postali · Julho 20, 2010

Obrigado Romero pelos toques sobre as sintaxes, é que sou novo no php.

Montei outra verificação if mais embaixo com a linha passando o quadro enquete para o document e verificando se esta vazio acho q seria isso não é? Porém o mesmo não funfo.

Obrigado pela ajuda.

function Valida(){
var controle = 0;
//var controle2 = 0;
    for (i=0;i<document.enquete.elements.length;i++){
        if (document.enquete.elements[i].type == "radio"){
        if (document.enquete.elements[i].checked == 0){
    
        controle++;
        
        }
        }
    }
    if (controle <= 0){
        alert("Selecione uma das opções");
        return false;
    }
    
    if (document.enquete.elements[i].value == ''){
        alert (" O campo CPF não está preenchido!");
    //    return false;
        }

        
    else {
    submit.enquete();        
    }
}

Editado Abril 13, 2011 por *FIT*
Adicionar as tags [code]

Romero Dias · Julho 20, 2010

Postali,

Na verdade, essa sua dúvida deveria ser postada na seção Ajax, JavaScript, XML, DOM.

Preparei um exemplo, da uma olhada se é isso mesmo.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>
  function Valida()
  {
      var controle = 0;
      
      for (i=0; i<document.enquete.elements.length; i++)
      {
          if (document.enquete.elements[i].type == "radio")
          {
              if (document.enquete.elements[i].checked == 1)
              {
                  //incrementa a variavel controle caso algum radio for checked
                  controle++;
              }
          }
      }
      
      //se a variavel controle não foi incrementada, então não fo preenchido nada.
      if (controle == 0)
      {
          alert("Selecione uma das opções");
          return false;
      }
      
      //Verifica se o campo CPF foi preenchido
      if (document.enquete.cpf.value == '')
      {
          alert (" O campo CPF não está preenchido!");
          return false;
      }
      //Caso todas as condições forem verdadeiras, faça:
      else 
      {
         document.enquete.submit();
      }
  } 
  </script>
</head>
<body>
<form method="get" action="" onsubmit="return Valida()" name="enquete">
  <input type="radio" name="opcao" value="opcao 1" />
  opcao 1
  <input type="radio" name="opcao" value="opcao 2" />
  opcao 2
  <input type="radio" name="opcao" value="opcao 3" />
  opcao 3
  <input type="radio" name="opcao" value="opcao 4" />
  opcao 4
  <input type="radio" name="opcao" value="opcao 5" />
  opcao 5
  <input type="radio" name="opcao" value="opcao 6" />
  opcao 6
  <input type="text" name="cpf" value=""/>
  <input type="submit" value="Enter" />
</form>
</body>
</html>

Abraço

postali · Julho 21, 2010

Muito Obrigado Romero!!

Aqui funfo que foi uma beleza, porém ele so valida um grupo de radio que é o name="opcao", no meu codigo vou usar GRUPOS de names opcao2 e opcao3

exemplo: name="opcao2" e name="opcao3"

Criei mais de um grupo mais ele somente validou o primeiro radio "opcao", teoricamente era para validar todos os radios independentes dos names não é mesmo?

Obrigado amigo,

Romero Dias · Julho 21, 2010

Fala ae Postali,

kara, fiz um outro exemplo pra vc, considerando 3 blocos de elementos radio. da uma olhada,

qualquer duvida você posta ae,

abraço,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript">
  function Valida()
  {
      var opcao         = 0;
      var opcao1        = 0;
      var opcao2        = 0;
      var qtdElementos  = document.enquete.elements.length; 
      var objElement    = document.enquete.elements; 
      
      for (i=0; i < qtdElementos; i++){
          if (objElement[i].type == "radio" && objElement[i].name == 'opcao'){
              if (objElement[i].checked == 1){
                  //incrementa a variavel controle caso algum radio for checked
                  opcao++;
              }
          }
      }

      for (i=0; i < qtdElementos; i++){
          if (objElement[i].type == "radio" && objElement[i].name == 'opcao1'){
              if (objElement[i].checked == 1){
                  //incrementa a variavel controle caso algum radio for checked
                  opcao1++;
              }
          }
      }
      
      for (i=0; i < qtdElementos; i++){
          if (objElement[i].type == "radio" && objElement[i].name == 'opcao2'){
              if (objElement[i].checked == 1){
                  //incrementa a variavel controle caso algum radio for checked 
                  opcao2++; 
              }
          }
      }      

      //return false se nenhum radio da primeira carreira for preenchida
      if (opcao == 0){
          alert("A primeira carreira de opções deve ser preenchida!");
          return false;
      }

      //return false se nenhum radio da segunda carreira for preenchida
      if (opcao1 == 0){
          alert("A segunda carreira de opções deve ser preenchida!");
          return false;
      }

      //return false se nenhum radio da terceira carreira for preenchida
      if (opcao2 == 0){
          alert("A terceira carreira de opções deve ser preenchida!");
          return false;
      }
      
      //Verifica se o campo CPF foi preenchido
      if (document.enquete.cpf.value == ''){
          alert (" O campo CPF não está preenchido!");
          return false;
      }
      //Caso todas as condições forem verdadeiras, faça:
      else{
         document.enquete.submit();
      }
  }
  </script>
  
</head>
<body>
<form method="get" action="" onsubmit="return Valida()" name="enquete">


  Primeira carreira: <br />

  <input type="radio" name="opcao" value="opcao 1" />
  opcao 1
  <input type="radio" name="opcao" value="opcao 2" />
  opcao 2
  <input type="radio" name="opcao" value="opcao 3" />
  opcao 3
  <input type="radio" name="opcao" value="opcao 4" />
  opcao 4
  <input type="radio" name="opcao" value="opcao 5" />
  opcao 5
  <input type="radio" name="opcao" value="opcao 6" />
  opcao 6
  
  <br /><br />Segunda carreira: <br />
  
  <input type="radio" name="opcao1" value="opcao 1" />
  opcao 1
  <input type="radio" name="opcao1" value="opcao 2" />
  opcao 2
  <input type="radio" name="opcao1" value="opcao 3" />
  opcao 3
  <input type="radio" name="opcao1" value="opcao 4" />
  opcao 4
  <input type="radio" name="opcao1" value="opcao 5" />
  opcao 5
  <input type="radio" name="opcao1" value="opcao 6" />
  opcao 6
  
  <br /><br />Terceira carreira: <br />
  
  <input type="radio" name="opcao2" value="opcao 1" />
  opcao 1
  <input type="radio" name="opcao2" value="opcao 2" />
  opcao 2
  <input type="radio" name="opcao2" value="opcao 3" />
  opcao 3
  <input type="radio" name="opcao2" value="opcao 4" />
  opcao 4
  <input type="radio" name="opcao2" value="opcao 5" />
  opcao 5
  <input type="radio" name="opcao2" value="opcao 6" />
  opcao 6

  <br />  <br />
  <input type="text" name="cpf" value=""/>
  <input type="submit" value="Enter" />
</form>
</body>
</html>

postali · Julho 21, 2010

Romero muito obrigado!

Aqui funfo o codigo lindo mesmo, era exatamente isso que eu estava precisando.

Como vou trabalhar com muitos grupos diferentes de radio, estou pensando em deixar um "*" na frente da linha em vermelho quando o usuário não marcar algum campo do radio ou cpf. Deste modo daria somente um alert escrito marca os campos com "*" em vermelho.

Valeu mesmo meu amigo, o que fez já me deixou muito feliz!

Editado Julho 21, 2010 por postali

Tamboréu · Abril 13, 2011

Grande Romero

Uma dúvida me surgiu aqui ao usar a sua função.

Caso queiramos usar um array (name="opcao2[]" ao invés de name="opcao2") no checkbox, como ficaria o script de validação?

Ex.: <input type="radio" name="opcao2[]" value="opcao 4" />

Obrigado e parabéns pela contribuição

Fala ae Postali,

kara, fiz um outro exemplo pra vc, considerando 3 blocos de elementos radio. da uma olhada,

qualquer duvida você posta ae,

abraço,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
&lt;script language="javascript">
  function Valida()
  {
      var opcao         = 0;
      var opcao1        = 0;
      var opcao2        = 0;
      var qtdElementos  = document.enquete.elements.length; 
      var objElement    = document.enquete.elements; 
      
      for (i=0; i < qtdElementos; i++){
          if (objElement[i].type == "radio" && objElement[i].name == 'opcao'){
              if (objElement[i].checked == 1){
                  //incrementa a variavel controle caso algum radio for checked
                  opcao++;
              }
          }
      }

      for (i=0; i < qtdElementos; i++){
          if (objElement[i].type == "radio" && objElement[i].name == 'opcao1'){
              if (objElement[i].checked == 1){
                  //incrementa a variavel controle caso algum radio for checked
                  opcao1++;
              }
          }
      }
      
      for (i=0; i < qtdElementos; i++){
          if (objElement[i].type == "radio" && objElement[i].name == 'opcao2'){
              if (objElement[i].checked == 1){
                  //incrementa a variavel controle caso algum radio for checked 
                  opcao2++; 
              }
          }
      }      

      //return false se nenhum radio da primeira carreira for preenchida
      if (opcao == 0){
          alert("A primeira carreira de opções deve ser preenchida!");
          return false;
      }

      //return false se nenhum radio da segunda carreira for preenchida
      if (opcao1 == 0){
          alert("A segunda carreira de opções deve ser preenchida!");
          return false;
      }

      //return false se nenhum radio da terceira carreira for preenchida
      if (opcao2 == 0){
          alert("A terceira carreira de opções deve ser preenchida!");
          return false;
      }
      
      //Verifica se o campo CPF foi preenchido
      if (document.enquete.cpf.value == ''){
          alert (" O campo CPF não está preenchido!");
          return false;
      }
      //Caso todas as condições forem verdadeiras, faça:
      else{
         document.enquete.submit();
      }
  }
  </script>
  
</head>
<body>
<form method="get" action="" onsubmit="return Valida()" name="enquete">


  Primeira carreira: <br />

  <input type="radio" name="opcao" value="opcao 1" />
  opcao 1
  <input type="radio" name="opcao" value="opcao 2" />
  opcao 2
  <input type="radio" name="opcao" value="opcao 3" />
  opcao 3
  <input type="radio" name="opcao" value="opcao 4" />
  opcao 4
  <input type="radio" name="opcao" value="opcao 5" />
  opcao 5
  <input type="radio" name="opcao" value="opcao 6" />
  opcao 6
  
  <br /><br />Segunda carreira: <br />
  
  <input type="radio" name="opcao1" value="opcao 1" />
  opcao 1
  <input type="radio" name="opcao1" value="opcao 2" />
  opcao 2
  <input type="radio" name="opcao1" value="opcao 3" />
  opcao 3
  <input type="radio" name="opcao1" value="opcao 4" />
  opcao 4
  <input type="radio" name="opcao1" value="opcao 5" />
  opcao 5
  <input type="radio" name="opcao1" value="opcao 6" />
  opcao 6
  
  <br /><br />Terceira carreira: <br />
  
  <input type="radio" name="opcao2" value="opcao 1" />
  opcao 1
  <input type="radio" name="opcao2" value="opcao 2" />
  opcao 2
  <input type="radio" name="opcao2" value="opcao 3" />
  opcao 3
  <input type="radio" name="opcao2" value="opcao 4" />
  opcao 4
  <input type="radio" name="opcao2" value="opcao 5" />
  opcao 5
  <input type="radio" name="opcao2" value="opcao 6" />
  opcao 6

  <br />  <br />
  <input type="text" name="cpf" value=""/>
  <input type="submit" value="Enter" />
</form>
</body>
</html>

Entrar

(Resolvido) Validando grupos de radiobutons

Pergunta

postali

Link para o comentário

Compartilhar em outros sites

7 respostass a esta questão

Posts Recomendados

Romero Dias

Link para o comentário

Compartilhar em outros sites

postali

Link para o comentário

Compartilhar em outros sites

Romero Dias

Link para o comentário

Compartilhar em outros sites

postali

Link para o comentário

Compartilhar em outros sites

Romero Dias

Link para o comentário

Compartilhar em outros sites

postali

Link para o comentário

Compartilhar em outros sites

Tamboréu

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades