Ir para conteúdo
Fórum Script Brasil
  • 0

validação de formulários

Cleyton Luiz

Perguntado por Cleyton Luiz,

 Share

Pergunta

Cleyton Luiz

Cleyton Luiz

Postado
Postado

Olá pessoal gostaria de uma de vocês,

Bom é o seguinte estou desenvolvendo um site que contém vários formulários, nestes existem diversas validações, essas validações são chamadas de um JS externo, para mostrar o erro estou usando aquela telinha do alert.

Gostaria de alterar essa exibição para uma coisa mais interessante, por exemplo no momento em que a pessoa clicar no botão de enviar o formulário ao lado de cada campo aparecer o erro e o campo ficar com uma cor diferente, será que alguém pode me auxiliar nessa dúvida com algum tutorial ou alguns exemplos.

Obrigado.

Link para o comentário
Compartilhar em outros sites

6 respostass a esta questão

Posts Recomendados

  • 0
Cleyton Luiz

Cleyton Luiz

Postado
  • Autor
Postado

esse script ele me mostra como mudar a cor do campo, queria saber como faz para colocar um texto ao lado do campo informando que aquele campo é obrigatório, ex:

tenho vários campos, e no momento em que eu clicar no botão para enviar aparecer ao lado das caixas de textos a informação de que o campo é obrigatório, caso ele não tenha sido preenchido, já usei uma div invisivel mas não consegui fazer com que ela recebece o valor,

será que alguém pode me auxiliar.

Obrigado.

Link para o comentário
Compartilhar em outros sites
  • 0
Cleyton Luiz

Cleyton Luiz

Postado
  • Autor
Postado (editado)

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;
}[/codebox]

Editado por fercosmig
Adicionar ta CODE
Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.

×
 Share
Ir para lista de Perguntas


  • Estatísticas dos Fóruns

    • Tópicos
      152,4k
    • Posts
      652,2k
×
×
  • Criar Novo...