validar grupos de radio button

lote14 · Agosto 10, 2010

ae galera do javascript, boa noite.

é o seguinte:

"sistema de simulado:"

tenho um "form" que possue vários "radio button" variados dentro dele (pode ser de 1,2,3,5,9,20...)

gostaria de validar esses "radio", encontrei na net muitos exemplos com um "radio" fixo, onde o "name" nunca varia.

no meu caso existe vários grupos de "radios" dentro de uma somente "form" com "names" diferentes:

para esclarecer melhor só o código mesmo:

<form action="corrige.asp?mostra=corrige&exibe=<%=exibe%>&codigo=<%=codigo%>&nacesso=<% =rs.Fields("qtdacesso") %>" method="post" >
<div id="exercicio">
<ul>
    <%If (Session("login"))="" Then%>
	<li style="float:left; width:770px"><strong><font color="#FF0000">Atenção:</font></strong> É preciso fazer <a href="acesso.asp?mostra=acesso">Login</a> para resolver os Mini-simulados.</li>
	<li><div id="espaco"> </div></li>
	<%end if%>
<%=rs.Fields("foto")%>	
<div id="espaco"></div>     
<%'inicia um loop para exibir as questões
n=0
while not rs.EOF
n=n+1%>
<li> <strong><%=n%></strong> - 
<%=rs.Fields("pergunta")%>
</li>
	<%if rs.Fields("introdutorio")<>"" then
	response.Write "<li></li><li>"&rs.Fields("introdutorio")&"</li>"
	end if 
'exibe certo ou errado
	if rs.Fields("c")="-" and rs.Fields("d")="-" and rs.Fields("e")="-" then%>
	<li class="questao"> 
	<input  type="radio" value="a" name="questao<%=rs.Fields("id")%>" ><%=rs.Fields("a")%><br />
	<input type="radio" value="b" name="questao<%=rs.Fields("id")%>" ><%=rs.Fields("b")%> <br />
	</li>
	<%'multipla escolha
	else%>
	
	<li class="questao"> 
	<input  type="radio" value="a" name="questao<%=rs.Fields("id")%>" >a) <%=rs.Fields("a")%><br />
	<input type="radio" value="b" name="questao<%=rs.Fields("id")%>" >B) <%=rs.Fields("b")%> <br />
	<input type="radio" value="c" name="questao<%=rs.Fields("id")%>" >c) <%=rs.Fields("c")%><br /> 
	<input type="radio" value="d" name="questao<%=rs.Fields("id")%>" >d) <%=rs.Fields("d")%><br /> 
	<input type="radio" value="e" name="questao<%=rs.Fields("id")%>" >e) <%=rs.Fields("e")%><br />
	</li>
	<!--<li>Comente essa questão | comentários (4)</li>
	<li>
	Comentario enviado por José Carlos
	</li>
	<li>
	</li>-->
	<%
	end if
RS.movenext	
wend 
rs.Close
set rs = Nothing
%>
<li>
<table border="0" width="100%">
<tr>
  <td width="70%"  ><input type=submit class="botaoi" value="Corrigir mini-simulado" border="0"></td>
	<td width="11%" ><img src="imagem/add-comment-orange.gif" alt="" width="14" height="14" /> <a style="cursor:pointer" onclick="Foco('comentario')">Comente</a>
	</td>
	<td width="12%" >
	<!-- AddThis Button BEGIN -->
<div  class="addthis_toolbox addthis_default_style">
<a href="http://www.addthis.com/bookmark.php?v=250&username=xa-4c3e6b8374cb5642" class="addthis_button_compact">Compartilhe</a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4c3e6b8374cb5642"></script>
<!-- AddThis Button END -->
	</td>
	<td width="7%"><div align="right"><img src="imagem/8499_16x16.png" width="14" height="14" border="0"> <a title="Questão errada: ajude-nos a corrigir" href="contato.asp?mostra=contato&codigo=<%=codigo%>">Erro?</a></div></td>
</tr>
</table>
</li>
</ul>
</div>
</form>

e ae galera, alguém pode me dar uma luz, não saco "quase" nada de javascript!!!

William Bruno · Agosto 10, 2010

não tenho asp, poste o HTML gerado.

mas a regra é a mesma.. valide 'grupo' por 'grupo'... veja que cada grupo possui o mesmo name entre si..

lote14 · Setembro 20, 2010

resgatando o tópico:

pessoal tinha desistido desse código, mas agora não tenho para onde correr e preciso da ajuda de vcs,oK?

a ideia é a seguinte, só para entendimento:

de uma olhada nessa pagina só para entender melhor http://www.gabarite.com.br/questoes.asp?mostra=questoes&exibe=materia&codigo=265 existe um simulado para ser resolvido, tipo um quizz.

estrutura:

form - começo formulário

loop - asp

grupo de radio

radio a

radio b

radio c

radio d

radio e

.

outros grupos

loop - asp

form - fim formulário

obs: estes radio são gerados dinamicamente e cada grupo deles possui um name diferente

hoje o que acontece: ao corrigir o simulado, se o usuário não tiver marcada nenhum grupo de radiobutton o formulário é submetido a outra pagina onde é corrigido o simulado.

ex: se o usuário não marcar nenhuma questão o form é submetido normalmente e a nota é gravada no banco como zero.

o que eu quero: se o usuário esquecer de responder alguma questão, queria lembra-lo qual ele esqueceu de selecionar.

validar um radio apenas é mole, mais e ai se tratando de grupos que são gerados dinamicamente como faço?

preciso de um exemplo, grato a todos, valeu...

o código da pagina é aquele do primeiro post.

William Bruno · Setembro 20, 2010

exemplo:

<html>
<head>
<script type="text/javascript">
function id( el ){
	return document.getElementById( el );
}
function valida_radios( container )
{
	var radios = id( container ).getElementsByTagName('input');
	for( i in radios )
	{
		if( radios[i].checked==true )
			return 1;
	}
	return 0;
}
window.onload = function()
{
	id('form_pgs').onsubmit = function()
	{
		if( !valida_radios( 'pg1' ) )
		{
			alert( 'Responda a pergunta 1' );
			return false;
		}
		if( !valida_radios( 'pg2' ) )
		{
			alert( 'Responda a pergunta 2' );
			return false;
		}
		return true;
	}
}
</script>
</head>
<body>
	<form action="corrige.php" method="post" id="form_pgs">
		<fieldset id="pg1">
			<legend>Pergunta 1</legend>
			<input type="radio" name="pg1" value="1" />
			<input type="radio" name="pg1" value="2" />
			<input type="radio" name="pg1" value="3" />
		</fieldset>
		<fieldset id="pg2">
			<legend>Pergunta 2</legend>
			<input type="radio" name="pg2" value="1" />
			<input type="radio" name="pg2" value="2" />
			<input type="radio" name="pg2" value="3" />
		</fieldset>
		<input type="submit" name="ok" value="ok" />
	</form>
</body>
</html>

lote14 · Setembro 20, 2010

cara, beleza mas a quantidade de radiobutton é dinamica, vem do banco, e não tem valor fixo, como a do exemplo que no caso tem 2 grupos de radio.

eu queria que a quantidade de radio fosse dinamica, tem uma ideia de como posso colocar um parametro nesse código:

pensei assim:

<fieldset id="pg1">
                        <legend>Pergunta 1</legend>
                        <input type="radio" name="pg1" value="1" />
                        <input type="radio" name="pg1" value="2" />
                        <input type="radio" name="pg1" value="3" />
                </fieldset>

vou colocar em um loop, crio um nome único para cada id do fieldset.

if( !valida_radios( 'pg1' ) )
                {
                        alert( 'Responda a pergunta 1' );
                        return false;
                }

agora a duvida é a seguinte como entrar com parametro em pg1, entedeu mas ou menos.

outra coisa no explorer não funcionou, no firefox funcionou beleza.

valeu amigo pela ajuda.

William Bruno · Setembro 20, 2010

não cara.. não tem como você usar apenas 1 id.. se é dinâmico, faça dinâmico!

troque, para funcionar no IE:

function valida_radios( container )
{
	var radios = id( container ).getElementsByTagName('input');
	for( var i=0; i<radios.length; i++ )
	{
		if( radios[i].checked )
			return true;
	}
	return false;
}

a quantidade de rádios, é o de menos.. o importante, é você definir um ID para cada fieldset, e declarar esse id depois na chamada.

não programo em ASP, mas com php, por exemplo: (tenta extrair a idéia, e traduza pra tua linguagem)

<html>
<head>
<script type="text/javascript">
function id( el ){
       return document.getElementById( el );
}
function valida_radios( container )
{
	var radios = id( container ).getElementsByTagName('input');
	for( var i=0; i<radios.length; i++ )
	{
		if( radios[i].checked )
			return true;
	}
	return false;
}
</script>
</head>
<body>
	<form action="corrige.php" method="post" id="form_pgs">
	
<?php 
	$count = 7;
	$i = 1;
	$pags = '';
	while( $i<=$count )
	{
		$pags .= 'if( !valida_radios( \'pg'.$i.'\' ) )
		{
			alert( \'Responda a pergunta '.$i.'\' );
			return false;
		}';
?>
		<fieldset id="pg<?php echo $i; ?>">
			<legend>Pergunta <?php echo $i; ?></legend>
		<?php 
			for( $j=0; $j<rand(2,4); $j++ )
				echo '<input type="radio" name="pg'.$i.'" value="1" />';
		?>
		</fieldset>
<?php
		$i++;
	}
?>
		<input type="submit" name="ok" value="ok" />
	</form>
<script>
window.onload = function()
{
	id('form_pgs').onsubmit = function()
	{
<?php echo $pags; ?>
		return true;
	}
}
</script>
</body>
</html>

saída no browser:

<html>
<head>
<script type="text/javascript">
function id( el ){
       return document.getElementById( el );
}
function valida_radios( container )
{
	var radios = id( container ).getElementsByTagName('input');
	for( var i=0; i<radios.length; i++ )
	{
		if( radios[i].checked )
			return true;
	}
	return false;
}
</script>
</head>
<body>
	<form action="corrige.php" method="post" id="form_pgs">
	
		<fieldset id="pg1">
			<legend>Pergunta 1</legend>
		<input type="radio" name="pg1" value="1" /><input type="radio" name="pg1" value="1" /><input type="radio" name="pg1" value="1" /><input type="radio" name="pg1" value="1" />		</fieldset>
		<fieldset id="pg2">

			<legend>Pergunta 2</legend>
		<input type="radio" name="pg2" value="1" /><input type="radio" name="pg2" value="1" />		</fieldset>
		<fieldset id="pg3">
			<legend>Pergunta 3</legend>
		<input type="radio" name="pg3" value="1" /><input type="radio" name="pg3" value="1" />		</fieldset>
		<fieldset id="pg4">
			<legend>Pergunta 4</legend>

		<input type="radio" name="pg4" value="1" /><input type="radio" name="pg4" value="1" /><input type="radio" name="pg4" value="1" /><input type="radio" name="pg4" value="1" />		</fieldset>
		<fieldset id="pg5">
			<legend>Pergunta 5</legend>
		<input type="radio" name="pg5" value="1" /><input type="radio" name="pg5" value="1" /><input type="radio" name="pg5" value="1" /><input type="radio" name="pg5" value="1" />		</fieldset>
		<fieldset id="pg6">
			<legend>Pergunta 6</legend>
		<input type="radio" name="pg6" value="1" /><input type="radio" name="pg6" value="1" /><input type="radio" name="pg6" value="1" />		</fieldset>

		<fieldset id="pg7">
			<legend>Pergunta 7</legend>
		<input type="radio" name="pg7" value="1" /><input type="radio" name="pg7" value="1" /><input type="radio" name="pg7" value="1" /><input type="radio" name="pg7" value="1" />		</fieldset>
		<input type="submit" name="ok" value="ok" />
	</form>
<script>
window.onload = function()
{
	id('form_pgs').onsubmit = function()
	{
if( !valida_radios( 'pg1' ) )
		{
			alert( 'Responda a pergunta 1' );
			return false;
		}if( !valida_radios( 'pg2' ) )
		{
			alert( 'Responda a pergunta 2' );
			return false;
		}if( !valida_radios( 'pg3' ) )
		{
			alert( 'Responda a pergunta 3' );
			return false;
		}if( !valida_radios( 'pg4' ) )
		{
			alert( 'Responda a pergunta 4' );
			return false;
		}if( !valida_radios( 'pg5' ) )
		{
			alert( 'Responda a pergunta 5' );
			return false;
		}if( !valida_radios( 'pg6' ) )
		{
			alert( 'Responda a pergunta 6' );
			return false;
		}if( !valida_radios( 'pg7' ) )
		{
			alert( 'Responda a pergunta 7' );
			return false;
		}		return true;
	}
}
</script>
</body>
</html>

e veja que funciona perfeitamente.

Entrar

Arquivado

validar grupos de radio button

Recommended Posts

lote14 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

lote14 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

lote14 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante