Ir para conteúdo

POWERED BY:

Arquivado

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

BassGun

[Resolvido] Javascript - Validação

Por , em Javascript

Recommended Posts

BassGun    0

BassGun
Postado

Pessoal é o seguinte, fiz um javascript que desabilita dois campos dependendo de duas das opções que posso escolher num radio button.

 

Agora eu estava querendo que ao invés de desabilitar esses campos sumissem (ficassem ocultos). Tentei fazer aqui e procurei no fórum mas não consegui. http://forum.imasters.com.br/public/style_emoticons/default/natal_sad.gif

 

Vou postar meu código aqui com a função que desabilita funcionando e a função que fiz separada para ocultar que não deu certo.

 

Código principal

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Pré-Agendamento de Visitas</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript" src="calendario.js"></script>
<link rel="stylesheet" type=text/css href="jquery-ui-1.7.2.custom.css" />

<script>

function checaCampos(){
var nome = document.formulario.nome;
var email = document.formulario.email;
var mensagem = document.formulario.mensagem;
var erro = "";
var count = 0;

if (nome.value == ""){
erro += "\nPreencha o campo nome";
count = count + 1;
}

if (email.value == ""){
erro += "\nPreencha o campo e-mail";
count = count + 1;
}

if (mensagem.value == ""){
erro += "\nPreencha o campo mensagem";
count = count + 1;
}

if (count > 0 ){
alert("Os seguintes erros foram encontrados:\n" + erro);
return false;
}
else{
document.formulario.submit();
}
}


function desabilitaCampo(){
document.formulario.calendario.disabled=true;
document.formulario.hora.disabled=true;
}

function habilitaCampo(){
document.formulario.calendario.disabled=false;
document.formulario.hora.disabled=false;
}

function mascara(o,f){
v_obj=o
v_fun=f
setTimeout("execmascara()",1)
}

function execmascara(){
v_obj.value=v_fun(v_obj.value)
}

function telefone(v){
v=v.replace(/\D/g,"")                 //Remove tudo o que não é dígito
v=v.replace(/^(\d\d)(\d)/g,"($1) $2") //Coloca parênteses em volta dos dois primeiros dígitos
v=v.replace(/(\d{4})(\d)/,"$1-$2")    //Coloca hífen entre o quarto e o quinto dígitos
return v
}

</script>

</head>
<body>

<form action="recebePreAgendamento.php" method="POST" name="formulario">

<p>* Preencha os campos marcados em vermelho</p>

<input type="radio" name="opcao" value="Agendamento de Visita" checked onclick="habilitaCampo()"/>Agendamento de Visita<br>
<input type="radio" name="opcao" value="Contato" onclick="desabilitaCampo()"/>Contato<br>
* Nome: <input type="text" name="nome" size="25"><br>
* E-mail: <input type="text" name="email" size="25"><br>
Data: <input type="text" name="calendario" id="calendario" size="25"/><br>
Hora:
<select name="hora">
<option value="09:00">09:00</option>
<option value="09:30">09:30</option>
<option value="10:00">10:00</option>
<option value="10:30">10:30</option>
<option value="11:00">11:00</option>
<option value="11:30">11:30</option>
<option value="12:00">12:00</option>
<option value="12:30">12:30</option>
<option value="13:00">13:00</option>
<option value="13:30">13:30</option>
<option value="14:00">14:00</option>
<option value="14:30">14:30</option>
<option value="15:00">15:00</option>
<option value="15:30">15:30</option>
<option value="16:00">16:00</option>
<option value="16:30">16:30</option>
<option value="17:00">17:00</option>
<option value="17:30">17:30</option>
<option value="18:00">18:00</option>
<option value="18:30">18:30</option>
<option value="19:00">19:00</option>
<option value="19:30">19:30</option>
<option value="20:00">20:00</option>
<option value="20:30">20:30</option>
<option value="21:00">21:00</option>
</select><br>
Telefone: <input type="text" name="tel" onkeypress="mascara(this,telefone)" maxlength="14"><br>
* Mensagem: <textarea name="mensagem" rows="5" cols="42"></textarea><br>
<input type="submit" value="Enviar" onClick="return checaCampos();"><br>
<input type="reset" value="limpar">

</form>

</body>
</html>

Função que não deu certo

 

function someCampo(){
var aux = document.formulario.opcao;

if (opcao.value == 'Contato'){
document.getElementById('calendario').style.display = 'block';
}
else{
document.getElementById('calendario').style.display = 'none';
}
}

Agradeço a todos que puderem me ajudar! http://forum.imasters.com.br/public/style_emoticons/default/natal_smile.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

Victor Cometti    8

Victor Cometti
Postado

eu eu num saco muito disso n, outro palpite aqui

 

document.getElementById('calendario').style.display = 'none';

 

document.getElementById('caldendario').style.visibility = 'hidden';

Compartilhar este post

Link para o post
Compartilhar em outros sites

Henrique Barcelos    290

Henrique Barcelos
Postado

eu eu num saco muito disso n, outro palpite aqui

 

document.getElementById('calendario').style.display = 'none';

 

document.getElementById('caldendario').style.visibility = 'hidden';

Basta um dos 2...

Compartilhar este post

Link para o post
Compartilhar em outros sites

BassGun    0

BassGun
Postado

Pessoal, primeiramente agradeço a ajuda de todos e comunico que deu Certo!!! http://forum.imasters.com.br/public/style_emoticons/default/natal_w00t.gif

 

Vou postar o código como ficou para que possa ser reaproveitado caso alguem tenha uma dúvida similar.

 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Pré-Agendamento de Visitas</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript" src="calendario.js"></script>
<link rel="stylesheet" type=text/css href="jquery-ui-1.7.2.custom.css" />

<script>

function checaCampos(){
var nome = document.formulario.nome;
var email = document.formulario.email;
var mensagem = document.formulario.mensagem;
var erro = "";
var count = 0;

if (nome.value == ""){
erro += "\nPreencha o campo nome";
count = count + 1;
}

if (email.value == ""){
erro += "\nPreencha o campo e-mail";
count = count + 1;
}

if (mensagem.value == ""){
erro += "\nPreencha o campo mensagem";
count = count + 1;
}

if (count > 0 ){
alert("Os seguintes erros foram encontrados:\n" + erro);
return false;
}
else{
document.formulario.submit();
}
}


function someAgendamento(){
if(document.getElementById('selecao').value != "Contato"){
document.getElementById('calendario').style.display = 'none';
document.getElementById('hora').style.display = 'none';
document.getElementById('nomeCalendario').style.display = 'none';
}
}

function apareceAgendamento(){
if(document.getElementById('selecao').value == "Agendamento de Visita"){
document.getElementById('calendario').style.display = '';
document.getElementById('hora').style.display = '';
document.getElementById('nomeCalendario').style.display = '';

}
}

function mascara(o,f){
v_obj=o
v_fun=f
setTimeout("execmascara()",1)
}

function execmascara(){
v_obj.value=v_fun(v_obj.value)
}

function telefone(v){
v=v.replace(/\D/g,"")                 //Remove tudo o que não é dígito
v=v.replace(/^(\d\d)(\d)/g,"($1) $2") //Coloca parênteses em volta dos dois primeiros dígitos
v=v.replace(/(\d{4})(\d)/,"$1-$2")    //Coloca hífen entre o quarto e o quinto dígitos
return v
}

</script>

</head>
<body>

<form action="recebePreAgendamento.php" method="POST" name="formulario">

<p>* Preencha os campos marcados em vermelho</p>

<input type="radio" name="opcao" id="selecao" value="Agendamento de Visita" checked onclick="apareceAgendamento()"/>Agendamento de Visita<br>
<input type="radio" name="opcao" id="selecao" value="Contato" onclick="someAgendamento()"/>Contato<br>
* Nome: <input type="text" name="nome" size="25"><br>
* E-mail: <input type="text" name="email" size="25"><br>
<table border="0">
<tr>
<td id="nomeCalendario">Data: <input type="text" name="calendario" id="calendario" size="25"/></td>
</tr>
<tr>
<td id="hora">
Hora:
<select name="hora" id="hora">
<option value="09:00">09:00</option>
<option value="09:30">09:30</option>
<option value="10:00">10:00</option>
<option value="10:30">10:30</option>
<option value="11:00">11:00</option>
<option value="11:30">11:30</option>
<option value="12:00">12:00</option>
<option value="12:30">12:30</option>
<option value="13:00">13:00</option>
<option value="13:30">13:30</option>
<option value="14:00">14:00</option>
<option value="14:30">14:30</option>
<option value="15:00">15:00</option>
<option value="15:30">15:30</option>
<option value="16:00">16:00</option>
<option value="16:30">16:30</option>
<option value="17:00">17:00</option>
<option value="17:30">17:30</option>
<option value="18:00">18:00</option>
<option value="18:30">18:30</option>
<option value="19:00">19:00</option>
<option value="19:30">19:30</option>
<option value="20:00">20:00</option>
<option value="20:30">20:30</option>
<option value="21:00">21:00</option>
</select><br>
</td>
</tr>
</tbody>
</table>
Telefone: <input type="text" name="tel" onkeypress="mascara(this,telefone)" maxlength="14"><br>
* Mensagem: <textarea name="mensagem" rows="5" cols="42"></textarea><br>
<input type="submit" value="Enviar" onClick="return checaCampos();"><br>
<input type="reset" value="limpar">

</form>

</body>
</html>

Abraço a todos! http://forum.imasters.com.br/public/style_emoticons/default/natal_biggrin.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

BassGun    0

BassGun
Postado

Olá Pessoal!

 

Gostaria de esclarecer outra dúvida: http://forum.imasters.com.br/public/style_emoticons/default/natal_happy.gif

 

Tentei ocultar/exibir o conteúdo de uma div atribuindo um id a ela utilizando essa mesma função que deu certo mas não consegui! http://forum.imasters.com.br/public/style_emoticons/default/natal_ohmy.gif

 

Existe essa possibilidade?

 

Fico no aguardo!

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

atribuindo um id a ela utilizando essa mesma função que deu certo mas não consegui! http://forum.imasters.com.br/public/style_emoticons/default/natal_ohmy.gif

 

Não pode repetir IDs numa mesma página.

Oque você pode fazer, é uma função mais genérica..

 

Que receba como parâmetro o ID do elemento, e ai decida se exibe ou oculta..

function togDiv( id )
{
  var el = document.getElementById( id );
  if( el.style.display=='none' )
     el.style.display='block';
  else
     el.style.display='none';
}
forma de usar:

<input type="button" name="tal" value="Esconder/Mostrar" onclick="togDiv('hora')" />

Compartilhar este post

Link para o post
Compartilhar em outros sites

BassGun    0

BassGun
Postado

Acho que expliquei errado William.

 

Eu não quero repitir ids na mesma página, apenas usar div para separar e esconder todo o conteúdo que estiver dentro dela, seja texto, figura, etc.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Isola esse trecho de código, e posta aqui.

Pois não entendi a dúvida, e não sei onde você tá errando.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

O código que postei, é mais usual que este. Se a idéia for fazer um toggle da DIV.

Compartilhar este post

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

Informação importante

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

  Aceito