Aqui no meu blog, ja postei alguns exemplos de formularios de contato, voce pode usar qualquer um deles para testar este exercicio, ou se desejar, pode criar seu proprio formulario.Caso deseje, seguem os links dos posts criados:Formulario em ASPFormulario em PHP (melhorado)Formulario em PHP padraoAbaixo, separarei os codigos HTML, CSS e Javascript. Neste exemplo, estamos usando tudo na mesma pagina HTML pois este e um exemplo apenas para fins de estudo, mas se desejar, pode deixar o CSS e o Javascript em documentos separados, o que e ate melhor.1 - Primeiramente o HTML, vejam que nao existe segredo nenhum na construcao do formulario, notem apenas que abaixo dos campos de nome, email e mensagem, existem mensagens de erro, que deverao aparecer somente se o campo nao for preenchido corretamente.Se abrir este exemplo em seu navegador, notara que as mensagens de erro aparecem logo que o formulario e exibido, e isso nao faz sentido... vamos arrumar isso agora mesmo. Nome: O campo NOME e obrigatorio E-mail: O campo E-MAIL e obrigatorio O E-MAIL que voce digitou nao e valido Telefone: Mensagem: Por favor, digite uma mensagem A Mensagem que voce digitou e muito curta 2 - Agora o CSS, tambem nao existe segredo nenhum, apenas os campos simplesmente estilizados com uma borda e um padding. O grande "pulo do gato" esta em esconder com um display:none, as divs com id #erroNome, #erroMail, #erroMail2, #erroMsg, #erroMsg2, pois estas sao as divs responsaveis por exibir as mensagens de erro.Abra este HTML em seu navegador, e note que agora faz mais sentido, as mensagens de erro nao aparecem logo que o formulario e aberto.p{ font-family:sans-serif; font-size:14px;}p img{ vertical-align:text-top;}input, textarea{ border:solid 1px #ccc; padding:5px;}/* abaixo estao os estilos das mensagens de erro */.erroValid{ padding:5px; background:#FFC; color:#900; border-radius:3px; margin:5px 0;}#erroNome, #erroMail, #erroMail2, #erroMsg, #erroMsg2{ display:none; /* Aqui eu escondo todas as mensagens de erro */}3 - Agora para fazer tudo funcionar, vamos colocar o Javascript, o codigo esta bem comentado para melhor entendimento.Ele e responsavel por verificar se os campos obrigatorios (no caso nome, email e mensagem) estao preenchidos corretamente, e o jQuery fica responsavel por exibir de uma maneira mais "elegante" as mensagens de erro, com um fadeIn e fadeOut.function validar(formulario){ if(formulario.nome.value ==''){ $('#erroNome').fadeIn('slow'); //se o campo nome estiver vazio, o jquery exibe a div #erroNome que ate entao estava escondida pelo CSS return false; } if(formulario.mail.value ==''){ $('#erroMail').fadeIn('slow'); //se o campo mail estiver vazio, o jquery exibe a div #erroMail que ate entao estava escondida pelo CSS return false; } if(formulario.mail.value.indexOf(('@' && '.'),0)== -1){ $('#erroMail2').fadeIn('slow'); //se o campo mail nao conter um ponto ou arroba, ele exibe a div #erroMail2 que ate entao estava escondida pelo CSS return false; } if(formulario.mensagem.value ==''){ $('#erroMsg').fadeIn('slow'); //se o campo mensagem estiver vazio, o jquery exibe a div #erroMsg que ate entao estava escondida pelo CSS return false; } if(formulario.mensagem.value.length < 10){ $('#erroMsg2').fadeIn('slow'); //se o campo mensagem for preenchido com menos de 10 caracteres, o jquery exibe a div #erroMsg2 que ate entao estava escondida pelo CSS return false; } return true;};function apagarErro(){ $('.erroValid').fadeOut('slow'); //quando um campo e selecionado, ele