Help
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> </td>
<td> </td>
</tr>
<tr>
<td><strong>E-mail:</strong></td>
<td><input type="text" id="email" size="50" /></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td><strong>Web-site:</strong></td>
<td><input type="text" id="website" size="50" /></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td><strong>Assunto:</strong></td>
<td><input type="text" id="assunto" size="50" /></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td><strong>Mensagem:</strong></td>
<td><textarea id="mensagem" rows="5" cols="38"></textarea></td>
</tr>
<tr>
<td> </td>
<td> </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+
