Ir para conteúdo

Arquivado

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

Bruno T.I

Validação Radio Button

Recommended Posts

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

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

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

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

  • Conteúdo Similar

    • 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?
    • 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á.
    • 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.
       
       
    • 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
    • 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.