Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Bruno T.I

Validação Radio Button

Por , em Javascript

Recommended Posts

Bruno T.I    0

Bruno T.I
Postado

Bom dia pessoal

 

Gostaria de uma ajuda em  relação a autenticação de radio button.

 

Tenho o script abaixo e nete tenho dois radio, gostaria de deixar a validação automática, independente da quantidade de button

cadastrado, ou seja quero utilizar um laço de repetição, mas não consigo fazer. A forma abaixo se eu adicionar um button,

vou ter que ir no javascript e adicionar mais "opção". Lembrando que estou utilizando o valor do "nome" do radio.

 

  

<html>
<head>
<script language="JavaScript">
function validaRadio() {
  if (document.form1.opcao[0].checked == false 
    && document.form1.opcao[1].checked == false) {
    alert('Por favor, selecione o Tipo de Opção.');
    return false;
  }
  return true;
}
</script>
</head>
<body>
 
<form name="form1" method="post" onSubmit="return validaRadio();">
<table>
<tr><td colspan="2">Endereço para correspondência:</td></tr>        
<tr>
   <td>Opção 1: <input name="opcao" type="radio" value="opcao1"></td>
   <td>Opção 2: <input name="opcao" type="radio" value="opcao2"></td>
</tr>
</table>
<p><input type="submit" value="Enviar"></p>
</form>
</body>
</html>

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

gabrieldarezzo    255

gabrieldarezzo
Postado

Basicamente você precisa pegar os seletores dinamitizantes (por classe seria uma boa)

 

 

Da mesma maneira que você fez aqui: 

function validaRadio() {
  if (document.form1.opcao[0].checked == false 
    && document.form1.opcao[1].checked == false) {
    alert('Por favor, selecione o Tipo de Opção.');
    return false;
  }
  return true;
}

 

Tem diversas formas de fazer uma validação assim...

Fiz um exemplo abaixo: 

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	
	<form id="my-form" action="recebe.php" method="post">
	
	
		<h1>Exemplo de Check pelo seletor (.class)</h1>
		
		<h3>Faça sua escolha:</h3>
		<label>
			<input type="radio" name="escolha" class="radioCheck" value="goiaba" /> Goiaba
		</label>
		<br />
		<label>
			<input type="radio" name="escolha" class="radioCheck" value="onibus" /> Ônibus
		</label>
		
		
		<h3>Escolha um framework - Js:</h3>
		<label>
			<input type="radio" name="frameworkjs" class="radioCheck" value="angularjs" /> AngularJs
		</label>
		<br />
		<label>
			<input type="radio" name="frameworkjs" class="radioCheck" value="vuejs" /> VueJs
		</label>
		
		
		<br />
		<hr />
		
	
	
		<input type="submit" value="Enviar" />		
	</form>
	
	
	
	
	<script type="text/javascript">
	
	
		document.getElementById("my-form").addEventListener("submit", function(e) {
		
			
		
		
			var radioUniqueByName = [];		
			var lastRadioUniqueByName = '';
			var classname = document.getElementsByClassName("radioCheck");
			
			//Vamos capturar todos os elementos dinamicamente que tem a classe radioCheck
			for (var i = 0; i < classname.length; i++) {
				var nameOfButton = classname[i].getAttribute('name');
				
				if(nameOfButton != lastRadioUniqueByName){
					radioUniqueByName.push(nameOfButton);
				}
				
				lastRadioUniqueByName = nameOfButton;
			}
			
			//Agora vamos percorrer todos os radiosButtons e ter certeza que ao menos um dos Radios esta 'checked'.
			for(var i in radioUniqueByName){
				
				var atLastOneChecked = false;
				
				var uniqueRadio = radioUniqueByName[i];
				var elementToCheck = document.getElementsByName(uniqueRadio);
				
				//for(x in elementToCheck){
				for (var x = 0; x < classname.length; x++) {					
				
					// elementToCheck[x] != null  -> Evita erro de undefined
					if(elementToCheck[x] != null && elementToCheck[x].checked !== false){
						//Tem um elemento checado
						atLastOneChecked = true;
					}
					
				}
				
				//Se não tiver ao menos um checkado para a execução e retorna como false
				if(!atLastOneChecked){
					alert("Selecione o campo -> " + uniqueRadio);
					e.preventDefault();
					return false;
				}
			}
		});
		
		
	</script>
</body>
</html>

Live demo do exemplo:

https://fiddle.jshell.net/ydmepkwv/

 

 

Obs:

<script language="JavaScript">

a tag correta seria:

<script type="text/javascript"></script>

 

Porem a mesma pode ser omitida caso prefira:

<script></script>

Outra coisa que seria legal é manter o padrão de colocar o JS sempre antes do fechamento da tag body (</body>)

Assim você evita erro de undefined caso o JavaScript não tenha sido carregado e não precisa de truques como: 

document.addEventListener('DOMContentLoaded', function() {
	//Start Js-Secure here...
});

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

0x000000    0

0x000000
Postado

Não seria algo assim?

  

<html>

	<body>
 
		<form name="form1" method="post" onSubmit="return validaRadio();">
			<table>
				<tr><td colspan="2">Endereco para correspondencia:</td></tr>        
				<tr>
   		 			<td>Opcao 1: <input name="opcao" type="radio" value="opcao1"></td>
   		 			<td>Opcao 2: <input name="opcao" type="radio" value="opcao2"></td>
				</tr>
			</table>
			<p><input type="submit" value="Enviar"></p>
		</form>

		<script language="javascript">
		function validaRadio() {
			for(var i in document.form1.opcao){
				if (document.form1.opcao[i].checked === false) {
		    		alert('Por favor, selecione o Tipo de Opcao.');
		    		return false;
		  		} else{
					return true;
				}
			}
		}
		</script>
	
	</body>

</html>

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bruno T.I    0

Bruno T.I
Postado
2 horas atrás, 0x000000 disse:

Não seria algo assim?

  


<html>

	<body>
 
		<form name="form1" method="post" onSubmit="return validaRadio();">
			<table>
				<tr><td colspan="2">Endereco para correspondencia:</td></tr>        
				<tr>
   		 			<td>Opcao 1: <input name="opcao" type="radio" value="opcao1"></td>
   		 			<td>Opcao 2: <input name="opcao" type="radio" value="opcao2"></td>
				</tr>
			</table>
			<p><input type="submit" value="Enviar"></p>
		</form>

		<script language="javascript">
		function validaRadio() {
			for(var i in document.form1.opcao){
				if (document.form1.opcao[i].checked === false) {
		    		alert('Por favor, selecione o Tipo de Opcao.');
		    		return false;
		  		} else{
					return true;
				}
			}
		}
		</script>
	
	</body>

</html>

 

Boa tarde!

 

Bom, se eu colocar mais opções e selecionar alguma após clicar em enviar o javascript ainda percorre nas outras opções!

Ou seja ainda continua percorrendo nas demais opção que não selecionei

Exemplo:

  

<html>
<head>
<script language="javascript">
		function validaRadio() {
			for(var i in document.form1.opcao){
				if (document.form1.opcao[i].checked === false) {
		    		alert('Por favor, selecione o Tipo de Opcao.');
		    		return false;
		  		} else{
					return true;
				}
			}
		}
</script>
</head>
<body>
 
<form name="form1" method="post" onSubmit="return validaRadio();">
<table>
<tr><td colspan="2">Endereço para correspondência:</td></tr>        
<tr>
   <td>Opção 1: <input name="opcao" type="radio" value="opcao1"></td>
   <td>Opção 2: <input name="opcao" type="radio" value="opcao2"></td>
   <td>Opção 3: <input name="opcao" type="radio" value="opcao3"></td>
</tr>
</table>
<p><input type="submit" value="Enviar"></p>
</form>
</body>
</html>

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bruno T.I    0

Bruno T.I
Postado
4 horas atrás, gabrieldarezzo disse:

Basicamente você precisa pegar os seletores dinamitizantes (por classe seria uma boa)

 

 

Da mesma maneira que você fez aqui: 


function validaRadio() {
  if (document.form1.opcao[0].checked == false 
    && document.form1.opcao[1].checked == false) {
    alert('Por favor, selecione o Tipo de Opção.');
    return false;
  }
  return true;
}

 

Tem diversas formas de fazer uma validação assim...

Fiz um exemplo abaixo: 


<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	
	<form id="my-form" action="recebe.php" method="post">
	
	
		<h1>Exemplo de Check pelo seletor (.class)</h1>
		
		<h3>Faça sua escolha:</h3>
		<label>
			<input type="radio" name="escolha" class="radioCheck" value="goiaba" /> Goiaba
		</label>
		<br />
		<label>
			<input type="radio" name="escolha" class="radioCheck" value="onibus" /> Ônibus
		</label>
		
		
		<h3>Escolha um framework - Js:</h3>
		<label>
			<input type="radio" name="frameworkjs" class="radioCheck" value="angularjs" /> AngularJs
		</label>
		<br />
		<label>
			<input type="radio" name="frameworkjs" class="radioCheck" value="vuejs" /> VueJs
		</label>
		
		
		<br />
		<hr />
		
	
	
		<input type="submit" value="Enviar" />		
	</form>
	
	
	
	
	<script type="text/javascript">
	
	
		document.getElementById("my-form").addEventListener("submit", function(e) {
		
			
		
		
			var radioUniqueByName = [];		
			var lastRadioUniqueByName = '';
			var classname = document.getElementsByClassName("radioCheck");
			
			//Vamos capturar todos os elementos dinamicamente que tem a classe radioCheck
			for (var i = 0; i < classname.length; i++) {
				var nameOfButton = classname[i].getAttribute('name');
				
				if(nameOfButton != lastRadioUniqueByName){
					radioUniqueByName.push(nameOfButton);
				}
				
				lastRadioUniqueByName = nameOfButton;
			}
			
			//Agora vamos percorrer todos os radiosButtons e ter certeza que ao menos um dos Radios esta 'checked'.
			for(var i in radioUniqueByName){
				
				var atLastOneChecked = false;
				
				var uniqueRadio = radioUniqueByName[i];
				var elementToCheck = document.getElementsByName(uniqueRadio);
				
				//for(x in elementToCheck){
				for (var x = 0; x < classname.length; x++) {					
				
					// elementToCheck[x] != null  -> Evita erro de undefined
					if(elementToCheck[x] != null && elementToCheck[x].checked !== false){
						//Tem um elemento checado
						atLastOneChecked = true;
					}
					
				}
				
				//Se não tiver ao menos um checkado para a execução e retorna como false
				if(!atLastOneChecked){
					alert("Selecione o campo -> " + uniqueRadio);
					e.preventDefault();
					return false;
				}
			}
		});
		
		
	</script>
</body>
</html>

Live demo do exemplo:

https://fiddle.jshell.net/ydmepkwv/

 

 

Obs:

<script language="JavaScript">

a tag correta seria:

<script type="text/javascript"></script>

 

Porem a mesma pode ser omitida caso prefira:

<script></script>

Outra coisa que seria legal é manter o padrão de colocar o JS sempre antes do fechamento da tag body (</body>)

Assim você evita erro de undefined caso o JavaScript não tenha sido carregado e não precisa de truques como: 


document.addEventListener('DOMContentLoaded', function() {
	//Start Js-Secure here...
});

Eu vou olhar com mais calma e volto a responder, gostei do seu código!

 

1 minuto atrás, gabrieldarezzo disse:

Meu post totalmente ignorado :sleepy:

Não meu amigo! Agradeço pela sua atenção!

Estava olhando o seu código!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bruno T.I    0

Bruno T.I
Postado
4 minutos atrás, Bruno T.I disse:

 

Não meu amigo! Agradeço pela sua atenção!

Estava olhando o seu código!

 

Poderia me mostrar outro exemplo?

Compartilhar este post

Link para o post
Compartilhar em outros sites

gabrieldarezzo    255

gabrieldarezzo
Postado

Ai sim haha

 

Utilizando o conceito de grupo fica melhor mesmo.

 

Fiquei com invejinha e fiz em JavaScript puro se liga:

  

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	<form id="my-form" action="" method="post" onsubmit="return validaRadio();">
		<h1 >Exemplo2 de Check pelo seletor (.class)</h1>
		
		<div class="option-list">
			<h3>Pegar o Ônibus ou comprar a Goiaba?</h3>
			<label>
				<input type="radio" name="escolha" class="radioCheck" value="goiaba" /> Goiaba
			</label>
			<br />
			<label>
				<input type="radio" name="escolha" class="radioCheck" value="onibus" /> Ônibus
			</label>
		</div>
		
		
		<div class="option-list">
			<h3>Escolha um framework - Js?</h3>
			<label>
				<input type="radio" name="frameworkjs" class="radioCheck" value="angularjs" /> AngularJs
			</label>
			<br />
			<label>
				<input type="radio" name="frameworkjs" class="radioCheck" value="vuejs" /> VueJs
			</label>
		</div>
			
		
		<br />
		<hr />
		<button id="btn-acao">Cadastrar</button>
	</form>
	
	<script type="text/javascript">
		function validaRadio(){
		
			var grupo = document.getElementsByClassName("option-list");
			
			//Vamos capturar todos os elementos dinamicamente que tem a classe radioCheck
			for (var i = 0; i < grupo.length; i++) {
				var atLastOneChecked = false;
				var texto = grupo[i].getElementsByTagName("h3")[0].textContent;
				var radioToCheck = grupo[i].getElementsByClassName("radioCheck");
				
				//Vamos capturar todos os elementos dinamicamente que tem a classe radioCheck
				for (var x = 0; x < radioToCheck.length; x++) {					
					if(radioToCheck[i] != null && radioToCheck[x].checked !== false){
						atLastOneChecked = true;
					}
				}
				
				if(!atLastOneChecked){
					alert(texto);
					return false;
				}
			}
		}
	</script>
</body>
</html>

Live Demo:

https://fiddle.jshell.net/4su60j3f/

 

 

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript

  • Conteúdo Similar

    • Wanderson Moreira
      Navegar no site sem pausar webradio
      Por Wanderson Moreira
      Olá pessoal blz?
       
      gostaria de ajuda pra colocar um player de radio no meu site
      se eu colocar ele na pagina diretamente, toda vez q eu acessar uma pagina o player recarrega e pausa a transmissão
      pensei em por com iframe, porem no iframe o site nao mostra as url de navegação.. fica sempre na URL principal (exeplo: site.com) invés de gerar a url da pagina (exemplo: site.com/contato)
       
      alguém pode me dar uma ajuda?
    • GodivaPup
      Impossível reproduzir programa de rádio
      Por GodivaPup
      Olá, pessoal!
      Estou usando o site de uma rádio online, porque ouço música lá todos os dias. Mas naquele dia não consegui jogar o programa, ainda não entendo por quê?
      https://internetradiohoren.de/ é o site que escuto com frequência, e já está tudo consertado, você pode acessar e ouvir online lá.
    • Velomento Conde
      Radio button avalição
      Por Velomento Conde
      Ola pessoal estou para criar um sistema de avaliação de 5 estrelas, onde os usuários cadastrado na minha plataforma avaliem certo conteúdo seja salvo no banco de dado.
      Exemplo: Mariana = deu 2 estrala e Jonas de 5 estralas.
      e tudo dever ser privado, ninguém pode ver a avaliação de outro.
       
      Já fiz o sistema mas não consigo saber quem deu a avaliação. por favor se for algo simples queria vossa ajuda.
       
       
    • Dineysil
      Ajax e radio no form
      Por Dineysil
      Boa tarde!
       
      Sou iniciante em Javascript e Ajax e estou precisando de criar uma função para:
      Em um Form tenho dois "radios" jurídico e físico, preciso que ao clicar em uma opção no form alterne uma "Label" e uma "Text"
      Se a opção for Físico a Label será CPF: e a Text terá uma mascara de cpf
      Se a opção for Jurídico a Label será CNPJ: e a Text terá uma mascara de cnpj
       
      Com relação as máscaras eu já as tenho.
       
      O site está em ASP Clássico

      Agradeço se alguém poder ajudar.
       
      Claudiney
    • Vargasvda
      Radio Button já vir preenchido de acordo com o Banco (MySql)
      Por Vargasvda
      Boa Tarde Pessoal, 
      Sou novo na área e já consegui fazer várias coisas com o PHP, mas travei em um problema. 
      Tenho dois radio button:
      1- Habilitar
      2- Desabilitar
      Escolho e envio para o banco de dados através de um botão, até aí tudo certo, o banco é gravado corretamente. Porém, qdo acesso a página novamente, eles aparecem vazio, preciso que me traga marcado, o que tem no banco de dados, ( se ele foi marcado habilitado ou desabilitado no ultimo acesso).
       
      <form id="radio" name="radio" method="post" action="funcao.php" enctype="multipart/form-data">
          
        <input type="radio" name="foto" value="Habilita" > Habilita<br> 
        <input type="radio" name="foto" value="Desabilita"> Desabilita<br>
          <br>
          <br>
           <button type="submit" class="btn btn-primary">Alterar</button>
            
        </form>
       
       
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito