..:: 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 Em expansão, Siri pode ter Google como rival neste ano Notícias Notícias 
  • 0 Replies
  • 26 Views
New Replies Formulário de email que funcione Flash & ActionScript Kmelek 
  • 9 Replies
  • 2374 Views
New Replies Como desbloquear conteúdo criado no flash mx 2004
Dúvida!!!! 		Flash & ActionScript Ricllisboa 
  • 2 Replies
  • 1298 Views
New Replies Problemas com fontes no dreamweaver
quando acesso a pagina de outros 		Dreamweaver cesarmg 
  • 3 Replies
  • 1355 Views
New Replies Série Harry Potter dá origem a mundo paralelo na Internet Notícias Notícias 
  • 0 Replies
  • 421 Views
New Replies Acervo do Netflix é desafio para atrair assinantes no Brasil Notícias Notícias 
  • 0 Replies
  • 40 Views
New Replies Header
Como colocar uma variável no header 		PHP Vitor Goulart 
  • 1 Reply
  • 731 Views
New Replies Pacotes combinam hardware e software para grandes trabalhos Notícias Notícias 
  • 0 Replies
  • 200 Views

Publicidade

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