[Marcus VBP]

Javascript:

CODE

//função para evitar que o formulario seja enviado vazio (formulario de contato)
function checa_form(form) {

if(form.nome.value.length == 0) {
   document.getElementById("contato-ajuda-um").style.visibility="visible";
   document.getElementById("contato-ajuda-dois").style.visibility="hidden";
   document.getElementById("contato-ajuda-tres").style.visibility="hidden";
   document.getElementById("contato-ajuda-quatro").style.visibility="hidden";
   return false;
 } else {
 document.getElementById("contato-ajuda-um").style.visibility="hidden";
 }
 
 if(form.email.value.length == 0) {
   document.getElementById("contato-ajuda-dois").style.visibility="visible";
   document.getElementById("contato-ajuda-um").style.visibility="hidden";
   document.getElementById("contato-ajuda-tres").style.visibility="hidden";
   document.getElementById("contato-ajuda-quatro").style.visibility="hidden";
   return false;
 } else {
 document.getElementById("contato-ajuda-dois").style.visibility="hidden";
 }
 
 if(form.assunto.value.length == 0) {
   document.getElementById("contato-ajuda-tres").style.visibility="visible";
   document.getElementById("contato-ajuda-dois").style.visibility="hidden";
   document.getElementById("contato-ajuda-um").style.visibility="hidden";
   document.getElementById("contato-ajuda-quatro").style.visibility="hidden";
   return false;
 } else {
 document.getElementById("contato-ajuda-tres").style.visibility="hidden";
 }
 
 if(form.mensagem.value.length == 0) {
   document.getElementById("contato-ajuda-quatro").style.visibility="visible";
   document.getElementById("contato-ajuda-dois").style.visibility="hidden";
   document.getElementById("contato-ajuda-tres").style.visibility="hidden";
   document.getElementById("contato-ajuda-um").style.visibility="hidden";
   return false;
 } else {
 document.getElementById("contato-ajuda-quatro").style.visibility="hidden";
 }
 
 return true;
}

cada "if" corresponde a um campo. onde tem mensagem, nome, email, etc etc, eh o identificador (ID) do campo.

HTML:

CODE

   <div id="contato-ajuda">
   
    <div id="contato-ajuda-um" class="caixa-tres">
     <img src="imagens/setinha.gif" title="Preencha o campo ao lado" class="setinha-contato" />
     Por favor, preencha o campo nome.
    </div>
   
    <div id="contato-ajuda-dois" class="caixa-tres">
     <img src="imagens/setinha.gif" title="Preencha o campo ao lado" class="setinha-contato" />
     Por favor, preencha o campo E-mail.
    </div>
   
    <div id="contato-ajuda-tres" class="caixa-tres">
     <img src="imagens/setinha.gif" title="Preencha o campo ao lado" class="setinha-contato" />
     Por favor, preencha o campo Assunto.
    </div>
   
    <div id="contato-ajuda-quatro" class="caixa-tres">
     <img src="imagens/setinha.gif" title="Preencha o campo ao lado" class="setinha-contato" />
     Por favor, preencha o campo Mensagem.
    </div>
   
   </div>
   
     <form id="formcontato" name="formcontato" method="post" action="envio.php">
    <table border="0" cellspacing="0" cellpadding="0" summary="Contém os campos do formulário de contato">
            <tr>
              <td class="td1"><strong>Nome:</strong></td>
              <td><input type="text" id="nome" size="50" /></td>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
            <tr>
              <td><strong>E-mail:</strong></td>
              <td><input type="text" id="email" size="50" /></td>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
            <tr>
              <td><strong>Web-site:</strong></td>
              <td><input type="text" id="website" size="50" /></td>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
            <tr>
              <td><strong>Assunto:</strong></td>
              <td><input type="text" id="assunto" size="50" /></td>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
            <tr>
              <td><strong>Mensagem:</strong></td>
              <td><textarea id="mensagem" rows="5" cols="38"></textarea></td>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
            <tr>
              <td colspan="2" class="td-dos-botoes"><input name="enviar" type="submit" class="btn" id="enviar" value="Enviar" onclick="return checa_form(formcontato)" />              </td>
            </tr>
          </table>
     </form>

no botao de envio do formulario deve conter " onclick="return checa_form(formcontato)". "formcontato eh importantissimo, e deve conter o name do formulario.

agora o toque final:

CSS:

CODE

#contato-ajuda-um, #contato-ajuda-dois, #contato-ajuda-tres, #contato-ajuda-quatro {
visibility: hidden;
}

isso fara que as divs identificadas como #contato-ajuda-um, #contato-ajuda-dois, #contato-ajuda-tres e #contato-ajuda-quatro fiquem ocultas. qdo o cara deixa um campo em branco, o JS ativa e deixa visivel a div, informando qual o campo precisa ser preenchido.


T+