Pessoal estou tentando fazer uma validação em um formulario, mas não esta dando certo.
Quando o usuario clicar em enviar, os campos invalidos devem ser destacados com uma cor diferente, e as mensagens
de erro devem aparecer em uma div com o efeito em fadein, e os campos válidos devem permanecer com as informações corretas que foram digitadas anteriormente.
Sou iniciante nessa tecnologia, gostaria poder contar com a ajuda de vocês. Desde já obrigado a todos!!
seguem abaixo meus codigos:
aqui é o arquivo JS para a validação:
// JavaScript Document
function validacao(){
var formulario = document.formulario_contato;
var texto = "";
var erro = 0;
if (formulario.nome.value==""){
erro = 1;
texto = texto + "O campo NOME está vazio. Informe seu nome. <br />";
document.getElementById('nome').style.border = '1px solid #c00';
}
if (formulario.empresa.value==""){
erro = 1;
texto = texto + "O campo EMPRESA está vazio. Informe seu nome. <br />";
document.getElementById('empresa').style.border = '1px solid #c00';
}
if (formulario.prod_serv.value==""){
erro = 1;
texto = texto + "O campo PRODUTOS E SERVIÇOS está vazio. Informe seus principais produtos e serviços. <br />";
document.getElementById('prod_serv').style.border = '1px solid #c00';
}
if (formulario.ddd_fone.value==""){
erro = 1;
texto = texto + "O campo DDD-TELEFONE está vazio. Informe o código de DDD do seu telefone. <br />";
document.getElementById('ddd_fone').style.border = '1px solid #c00';
}
if (formulario.fone.value==""){
erro = 1;
texto = texto + "O campo TELEFONE está vazio. Informe o seu telefone. <br />";
document.getElementById('fone').style.border = '1px solid #c00';
}
if (formulario.ddd_celular.value==""){
erro = 1;
texto = texto + "O campo DDD-CELULAR está vazio. Informe o código de DDD do seu celular. <br />";
document.getElementById('ddd_celular').style.border = '1px solid #c00';
}
if (formulario.celular.value==""){
erro = 1;
texto = texto + "O campo CELULAR está vazio. Informe o seu celular. <br />";
document.getElementById('celular').style.border = '1px solid #c00';
}
if (formulario.endereco.value==""){
erro = 1;
texto = texto + "O campo ENDERECO está vazio. Informe o seu endereço. <br />";
document.getElementById('endereco').style.border = '1px solid #c00';
}
if (formulario.cidade.value==""){
erro = 1;
texto = texto + "O campo CIDADE está vazio. Informe a sua cidade. <br />";
document.getElementById('cidade').style.border = '1px solid #c00';
}
if (formulario.uf.value==""){
erro = 1;
texto = texto + "O campo UF(ESTADO) está vazio. Informe o seu estado. <br />";
document.getElementById('uf').style.border = '1px solid #c00';
}
if (formulario.email.value==""){
erro = 1;
texto = texto + "O campo E-MAIL está vazio. Informe seu e-mail. <br />";
document.getElementById('email').style.border = '1px solid #c00';
}
if (formulario.conf_email.value==""){
erro = 1;
texto = texto + "O campo CONFIRMAÇÃO DE E-MAIL está vazio. Informe seu e-mail. <br />";
document.getElementById('conf_email').style.border = '1px solid #c00';
}
if (formulario.conf_email.value!=formulario.email.value){
erro = 1;
texto = texto + "Você deve informar o mesmo e-mail em CONFIRMAÇÃO DE E-MAIL . Informe seu e-mail corretamente. <br />";
document.getElementById('conf_email').style.border = '1px solid #c00';
}
if(erro==1){
MM_effectAppearFade('msgerro', 1000, 0, 100, false); //função gerada pelo dreamweaver para o efeito fadein na div
document.getElementById('erro').innerHTML = texto;
return false;
}
}
Pergunta
ANDRE_GUSTAVO
Pessoal estou tentando fazer uma validação em um formulario, mas não esta dando certo.
Quando o usuario clicar em enviar, os campos invalidos devem ser destacados com uma cor diferente, e as mensagens
de erro devem aparecer em uma div com o efeito em fadein, e os campos válidos devem permanecer com as informações corretas que foram digitadas anteriormente.
Sou iniciante nessa tecnologia, gostaria poder contar com a ajuda de vocês. Desde já obrigado a todos!!
seguem abaixo meus codigos:
aqui é o arquivo JS para a validação:
// JavaScript Document function validacao(){ var formulario = document.formulario_contato; var texto = ""; var erro = 0; if (formulario.nome.value==""){ erro = 1; texto = texto + "O campo NOME está vazio. Informe seu nome. <br />"; document.getElementById('nome').style.border = '1px solid #c00'; } if (formulario.empresa.value==""){ erro = 1; texto = texto + "O campo EMPRESA está vazio. Informe seu nome. <br />"; document.getElementById('empresa').style.border = '1px solid #c00'; } if (formulario.prod_serv.value==""){ erro = 1; texto = texto + "O campo PRODUTOS E SERVIÇOS está vazio. Informe seus principais produtos e serviços. <br />"; document.getElementById('prod_serv').style.border = '1px solid #c00'; } if (formulario.ddd_fone.value==""){ erro = 1; texto = texto + "O campo DDD-TELEFONE está vazio. Informe o código de DDD do seu telefone. <br />"; document.getElementById('ddd_fone').style.border = '1px solid #c00'; } if (formulario.fone.value==""){ erro = 1; texto = texto + "O campo TELEFONE está vazio. Informe o seu telefone. <br />"; document.getElementById('fone').style.border = '1px solid #c00'; } if (formulario.ddd_celular.value==""){ erro = 1; texto = texto + "O campo DDD-CELULAR está vazio. Informe o código de DDD do seu celular. <br />"; document.getElementById('ddd_celular').style.border = '1px solid #c00'; } if (formulario.celular.value==""){ erro = 1; texto = texto + "O campo CELULAR está vazio. Informe o seu celular. <br />"; document.getElementById('celular').style.border = '1px solid #c00'; } if (formulario.endereco.value==""){ erro = 1; texto = texto + "O campo ENDERECO está vazio. Informe o seu endereço. <br />"; document.getElementById('endereco').style.border = '1px solid #c00'; } if (formulario.cidade.value==""){ erro = 1; texto = texto + "O campo CIDADE está vazio. Informe a sua cidade. <br />"; document.getElementById('cidade').style.border = '1px solid #c00'; } if (formulario.uf.value==""){ erro = 1; texto = texto + "O campo UF(ESTADO) está vazio. Informe o seu estado. <br />"; document.getElementById('uf').style.border = '1px solid #c00'; } if (formulario.email.value==""){ erro = 1; texto = texto + "O campo E-MAIL está vazio. Informe seu e-mail. <br />"; document.getElementById('email').style.border = '1px solid #c00'; } if (formulario.conf_email.value==""){ erro = 1; texto = texto + "O campo CONFIRMAÇÃO DE E-MAIL está vazio. Informe seu e-mail. <br />"; document.getElementById('conf_email').style.border = '1px solid #c00'; } if (formulario.conf_email.value!=formulario.email.value){ erro = 1; texto = texto + "Você deve informar o mesmo e-mail em CONFIRMAÇÃO DE E-MAIL . Informe seu e-mail corretamente. <br />"; document.getElementById('conf_email').style.border = '1px solid #c00'; } if(erro==1){ MM_effectAppearFade('msgerro', 1000, 0, 100, false); //função gerada pelo dreamweaver para o efeito fadein na div document.getElementById('erro').innerHTML = texto; return false; } }agora o form:<script src="SpryAssets/SpryEffects.js" type="text/javascript"></script> <script type="text/javascript" src="js/validacao.js"></script> <script type="text/javascript"> function MM_effectAppearFade(targetElement, duration, from, to, toggle) { Spry.Effect.DoFade(targetElement, {duration: duration, from: from, to: to, toggle: toggle}); } </script> //aqui começa o form <form method="post" name="formulario_contato" enctype="multipart/form-data" id="formorca" action="envia_form.php" onsubmit="return validacao();"> <div id="msgerro"></div> // AQUI A DIV ONDE AS MENSAGENS DE ERRO DEVEM APARECER <fieldset> <legend>Formulário</legend> <label> Nome: <input type="text" id="nome" name="nome" size="27"/> </label> <label> Empresa: <input type="text" id="empresa" name="empresa" size="17" /> </label> <label> Produtos/serviços: <input type="text" id="prod_serv" name="prod_serv" size="17" /> </label> <label> Fone: <input type="text" id="ddd_fone" name="ddd_fone" size="1"/>-<input type="text" id="fone" name="fone" size="16"/> </label> <label> Celular: <input type="text" id="ddd_celular" name="ddd_celular" size="1"/>-<input type="text" id="celular" name="celular" size="15"/> </label> <label> Endereço: <input type="text" id="endereco" name="endereco" size="46"/> </label> <label> Cidade: <input type="text" id="cidade" name="cidade" size="19"/> </label> <label> UF: <input type="text" id="uf" name="uf" size="1"/> </label> <label> E-mail: <input type="text" id="email" name="email" size="21"/> </label> <label> Conf. E-mail: <input type="text" id="conf_email" name="conf_email" size="21"/> </label> <label> <input class="btnenvia" type="submit" id="submit" name="submit" value="Enviar" /> </label> </fieldset> </form>A validação não esta sendo feita, esta indo direto para o action do form.
O que esta errado com o codigo?
Obrigado pela atenção e ajuda de todos.
Link para o comentário
Compartilhar em outros sites
1 resposta a esta questão
Posts Recomendados
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.