..:: MX Studio Fóruns ::..: validação de formulário sem usar o ALERT - ..:: MX Studio Fóruns ::..

Jump to content

Publicidade

Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

validação de formulário sem usar o ALERT como faço para mostrar mensagem de um outro jeito

#1 User is offline   Cleyton 

  • Group: Membros
  • Posts: 55
  • Joined: 14-June 07

  Posted 15 April 2008 - 12:16 AM

Olá meus caros amigos, desenvolvi um formulário que tem os campos validados só que ao clicar ele abre naquela janela de Alert, preciso que seje apresentado de uma forma diferente, alguém poderia me ajudar com alguma sugestão, como apresentar um texto ao lado do campo informando que ele deve ser preenchido.

Fico esperando a colaboração de vocês.

Obrigado.
0

#2 User is offline   Rafael Gomes 

  • Group: Membros
  • Posts: 138
  • Joined: 10-June 05

Posted 15 April 2008 - 09:54 AM

olá uma outra maneira fácul para você validar seus formulários é utilizar os Spry Validation do Dreamweaver CS3
0

#3 User is offline   Cleyton 

  • Group: Membros
  • Posts: 55
  • Joined: 14-June 07

  Posted 15 April 2008 - 08:24 PM

valeu Rafael, mas na verdade a minha dúvida é de como eu posso apresentar para o usuário uma mensagem (que não seje a de ALERT) que existem campos obrigatórios ou campos errados.

Será que alguém pode me ajudar?
0

#4 User is offline   Cleyton 

  • Group: Membros
  • Posts: 55
  • Joined: 14-June 07

  Posted 21 April 2008 - 11:05 AM

Olá pessoal andei verificando a opção Spry Validation, achei bem interessante não sabia que dava para fazer, serah que alguém tem um tuto para poder me ajudar, pode ser do spry ou de um exemplo em java script, estou necessitando para um trabalho.

Obrigado.
0

#5 User is offline   Cleyton 

  • Group: Membros
  • Posts: 55
  • Joined: 14-June 07

Posted 21 May 2008 - 11:24 PM

Olá pessoal gostaria de uma GRANDE ajuda de vocês, tentei usar o innerHTML achei bem interessante mais não sei porque não consegui fazer funcionar, mas testando consegui de um jeito diferente e agora surgiu alguns problemas, por exemplo quando não digito nada no formulário ele me avisa que somente o primeiro campo está vazio, gostaria que ele me mostrasse todos os campos, que no caso devem ser preenchidos juntamente com a alteração da cor do campo, nesse modelo que consegui montar também ocorre o seguinte, caso eu tenha clicado em incluir ele me da o errado após eu ter digitado e passado para o próximo campo gostaria que ele sumisse, será que podem me ajudar pois ainda tenho mais alguns formulários para fazer.

pessoal muito obrigado, mas muito obrigado mesmo.

segue os códigos:


HTML


<html>
<head>
<title>Formulário Cadastro</title>
<script language="javascript" type="text/javascript" src="teste.js"></script>
</head>
<body>
<form name="cadastro" method="post" onSubmit="return validaForm()">
<table width="100%" border="0">
<tr>
<td colspan="4">Cadastro de Filmes</td>
</tr>
<tr>
<td>Numero de registro</td>
<td><input name="registro" type="text" maxlength="10" size="10" /></td>
<td colspan="2"><div id="registro_oculto" style="visibility:hidden">Esse campo deve conter apenas números</div>
<div id="registro_oculto2" style="visibility:hidden"> Esse campo deve ser preenchido </div></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td colspan="2">&nbsp;</td>
</tr>
<tr>
<td width="15%"><label for="titulo1" id="titulo1"/> Título:</td>
<td><input name="titulo" type="text" id="titulo" size="45" maxlength="45"></td>
<td colspan="2"><div id="titulo_oculto" style="visibility=hidden;"> Esse campo é de preenchimento obrigatório</div></td>
</tr>
<tr>
<td>Gênero:</td>
<td width="22%">
Opção 1:
<select name="generos" size="1" id="generos">
<option value="0" selected>--Selecione--</option>
<option value="1" >Ação</option>
<option value="2">Animação</option>
<option value="3">Aventura</option>
<option value="4">Comédia</option>
<option value="5">Documentário</option>
<option value="6">Drama</option>
<option value="7">Erótico</option>
<option value="8">Ficção</option>
<option value="9">Guerra</option>
<option value="10">Infantil</option>
<option value="11">Músical</option>
<option value="12">Policial</option>
<option value="13">Romance</option>
<option value="14">Suspense</option>
<option value="15">Terror</option>
</select></td>
<td width="15%">
Opção 2:
<select name="generos2" size="1" id="generos2">
<option value="0" selected>--Selecione--</option>
<option value="1">Ação</option>
<option value="2">Animação</option>
<option value="3">Aventura</option>
<option value="4">Comédia</option>
<option value="5">Documentário</option>
<option value="6">Drama</option>
<option value="7">Erótico</option>
<option value="8">Ficção</option>
<option value="9">Guerra</option>
<option value="10">Infantil</option>
<option value="11">Músical</option>
<option value="12">Policial</option>
<option value="13">Romance</option>
<option value="14">Suspense</option>
<option value="15">Terror</option>
</select></td>
<td width="48%"><div id="generos_ocultos" style="visibility=hidden;"> Esse campo é de preenchimento obrigatório</div></td>
</tr>
<tr>
<td>Duração:</td>
<td><input type="text" name="duracao" size="3" maxlength="3">
min.</td>
<td colspan="2"><div id="duracao_oculto" style="visibility:hidden">Você Deve preencher esse campo</div></td>
</tr>
<tr>
<td colspan="4">&nbsp;</td>
</tr>
<tr>
<td colspan="4"><input name="enviar" type="submit" value="Incluir Filme">
<input name="Apagar" type="reset" value="Apagar Dados"> </td>
</tr>
</table>
</body>
</html>

JS

function validaForm()

{
//VALIDA REGISTRO

d = document.cadastro;
if (d.registro.value == ""){
document.getElementById('registro_oculto2').style.visibility = "visible";
document.getElementById('registro').style.backgroundColor = '#CCCCCC';
d.duracao.focus();
return false;
}



// VALIDA TITULO
d=document.cadastro;
if (d.titulo.value == "")
{
document.getElementById('titulo_oculto').style.visibility = "visible";
document.getElementById('titulo').style.backgroundColor = '#CCCCCC';
d.titulo.focus();
return false;
}


// validar GENERO
d= document.cadastro;
if (d.generos.value == d.generos2.value){
document.getElementById('generos_ocultos').style.visibility = "visible";
d.generos.focus();
return false;
}


//validar DURAÇÃO

d = document.cadastro;
if (d.duracao.value == ""){
document.getElementById('duracao_oculto').style.visibility = "visible";
document.getElementById('duracao').style.backgroundColor = '#CCCCCC';
d.duracao.focus();
return false;
}

return true;
}

0

#6 User is offline   Denis Mattos 

  • Group: Membros
  • Posts: 2
  • Joined: 25-August 08

Posted 25 August 2008 - 09:03 AM

Cleyton, o que pode ter acontecido é que voce não salvou o "teste.js" na mesma pasta do seu .html tente fazer isso.. ou entao se preferir jogue o codigo js dentro da tag head..

ficando assim:
CÓDIGO
<html>
<head>
<title>Formulário Cadastro</title>
<script>
function validaForm()

{
//VALIDA REGISTRO

d = document.cadastro;
if (d.registro.value == ""){
document.getElementById('registro_oculto2').style.visibility = "visible";
document.getElementById('registro').style.backgroundColor = '#CCCCCC';
d.duracao.focus();
return false;
}



// VALIDA TITULO
d=document.cadastro;
if (d.titulo.value == "")
{
document.getElementById('titulo_oculto').style.visibility = "visible";
document.getElementById('titulo').style.backgroundColor = '#CCCCCC';
d.titulo.focus();
return false;
}


// validar GENERO
d= document.cadastro;
if (d.generos.value == d.generos2.value){
document.getElementById('generos_ocultos').style.visibility = "visible";
d.generos.focus();
return false;
}


//validar DURAÇÃO

d = document.cadastro;
if (d.duracao.value == ""){
document.getElementById('duracao_oculto').style.visibility = "visible";
document.getElementById('duracao').style.backgroundColor = '#CCCCCC';
d.duracao.focus();
return false;
}

return true;
}
</script>
</head>
<body>
<form name="cadastro" method="post" onSubmit="return validaForm()">
<table width="100%" border="0">
<tr>
<td colspan="4">Cadastro de Filmes</td>
</tr>
<tr>
<td>Numero de registro</td>
<td><input name="registro" type="text" maxlength="10" size="10" /></td>
<td colspan="2"><div id="registro_oculto" style="visibility:hidden">Esse campo deve conter

apenas números</div>
<div id="registro_oculto2" style="visibility:hidden"> Esse campo deve ser preenchido

</div></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td colspan="2">&nbsp;</td>
</tr>
<tr>
<td width="15%"><label for="titulo1" id="titulo1"/> Título:</td>
<td><input name="titulo" type="text" id="titulo" size="45" maxlength="45"></td>
<td colspan="2"><div id="titulo_oculto" style="visibility=hidden;"> Esse campo é de

preenchimento obrigatório</div></td>
</tr>
<tr>
<td>Gênero:</td>
<td width="22%">
Opção 1:
<select name="generos" size="1" id="generos">
<option value="0" selected>--Selecione--</option>
<option value="1" >Ação</option>
<option value="2">Animação</option>
<option value="3">Aventura</option>
<option value="4">Comédia</option>
<option value="5">Documentário</option>
<option value="6">Drama</option>
<option value="7">Erótico</option>
<option value="8">Ficção</option>
<option value="9">Guerra</option>
<option value="10">Infantil</option>
<option value="11">Músical</option>
<option value="12">Policial</option>
<option value="13">Romance</option>
<option value="14">Suspense</option>
<option value="15">Terror</option>
</select></td>
<td width="15%">
Opção 2:
<select name="generos2" size="1" id="generos2">
<option value="0" selected>--Selecione--</option>
<option value="1">Ação</option>
<option value="2">Animação</option>
<option value="3">Aventura</option>
<option value="4">Comédia</option>
<option value="5">Documentário</option>
<option value="6">Drama</option>
<option value="7">Erótico</option>
<option value="8">Ficção</option>
<option value="9">Guerra</option>
<option value="10">Infantil</option>
<option value="11">Músical</option>
<option value="12">Policial</option>
<option value="13">Romance</option>
<option value="14">Suspense</option>
<option value="15">Terror</option>
</select></td>
<td width="48%"><div id="generos_ocultos" style="visibility=hidden;"> Esse campo é de

preenchimento obrigatório</div></td>
</tr>
<tr>
<td>Duração:</td>
<td><input type="text" name="duracao" size="3" maxlength="3">
min.</td>
<td colspan="2"><div id="duracao_oculto" style="visibility:hidden">Você Deve preencher esse

campo</div></td>
</tr>
<tr>
<td colspan="4">&nbsp;</td>
</tr>
<tr>
<td colspan="4"><input name="enviar" type="submit" value="Incluir Filme">
<input name="Apagar" type="reset" value="Apagar Dados"> </td>
</tr>
</table>
</form>
</body>
</html>


e outro detalhe.. esqueceu de fechar a tag "form"
0

Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

Similar Topics Collapse

  Topic Forum Started By Stats Last Post Info
New Replies Robô usa sensor Kinect para resgatar vítimas de terremotos Notícias Notícias 
  • 0 Replies
  • 144 Views
New Replies Release Candidate 1.6 está liberada para download Notícias Notícias 
  • 0 Replies
  • 256 Views
New Replies Hotel de Estocolmo usa celular como chave dos quartos Notícias Notícias 
  • 0 Replies
  • 181 Views
New Replies Cuidados para não roubarem sua banda larga Notícias Notícias 
  • 0 Replies
  • 494 Views
New Replies Google vai revelar software para web na TV em maio, diz jornal Notícias Notícias 
  • 0 Replies
  • 307 Views
New Replies Novo prédio da Apple nos EUA terá espaço para 13 mil funcionários, diz site Notícias Notícias 
  • 0 Replies
  • 140 Views
New Replies AOL contrata consultoria para avaliar opções e mira Yahoo!, diz jornal Notícias Notícias 
  • 0 Replies
  • 160 Views
New Replies Twitter implementa opção de listas para facilitar organização Notícias Notícias 
  • 0 Replies
  • 275 Views

Publicidade

2 User(s) are reading this topic
0 membro(s), 2 visitante(s) e 0 membros anônimo(s)