VALIDADOR INTELIGENTE PARA FORMULÁRIOS

Saudações Kneon Nights!

Gostaria de fazer minha contribuição pela boa vontade de todos que se disponibilizam, sem nenhum custo, a transmitir conhecimentos essenciais seja para a evolução ou ganha-pão de muitos que dependem deste universo de informações.

Bom, o sisteminha na realidade surgiu quando ao futucar um script de validação encontrado na rede terminei, na cagada, criando outro melhor ainda. E agora ele está aqui para quem quiser utilizar.

COMO FUNCIONA?

1. A pessoa aperta o botão enviar sem preencher nada (gaiaata!). Só que aqui não mérmão aqui não entra nada, o sistema barra logo trote por:

 a) não enviar a mensagem (*âââ*, lógico!), porém, fazendo o primeiro campo (no caso do form abaixo o campo nome) do formulário ficar vermelho e informando através de uma mensagem vermelha que este campo precisa ser preenchido;

 

2. Ao clicar no campo nome, este, volta a cor normal como se nada tivesse acontecido;

EU: - O mesmo ocorre com os demais campos: ao preencher o campo nome e enviarem a mensagem, o campo seguinte fica vermelho, surge a mensagem vermelha informando que tal campo precisa ser preenchido e assim sucessivamente.

FDP: - Brother, qualquer validador faria isso me conte uma novidade, onde entra a parada da inteligência aí?

*EU: - Calma jhow, relaxe, entra agora**!*

3. Se a pessoa tentar preencher apenas um campo por exemplo mensagem ou email, AUTOMATICAMENTE o cliques que ela der nesses campos serão direcionados para o campo nome. O mesmo acontecerá caso o campo nome seja preenchido certinho e ela clica no campo mensagem, automaticamente o clique dela neste campo será direcionado para o campo email e assim sucessivamente.

CONSIDERAÇÕES:

Esta funcionalidade obriga a pessoa a preencher campo por campo, prendendo-a ao primeiro campo, ao segundo e assim sucessivamente EVITANDO que todo o formulário seja enviado incompleto.

O FORMULÁRIO (HTML)

Pode ser qualquer outro, basta apenas configurá-lo ao script.

<form class="form" id="form1" action="(AQUI O ARQUIVO PHP QUE ENVIA)" method="POST">
<p class="name">
<input name="name" type="text" class="" placeholder="" id="name" onClick="return apagar()"/>
</p>
<p class="email">
<input name="email" type="text" class="" placeholder="" id="email" onClick="return apagar()" /> </p>
<p class="text">
<textarea name="text" class="" placeholder="" id="comment" onClick="return apagar()" ></textarea>
</p>
<div class="submit">
<div id="msg"></div>
<input type="submit" value="Enviar Mensagem" class="submit" onclick="return validar()" onSubmit="LimarCampo()"/>
</div>
</form>

O SCRIPT (JS)

 <script type="text/javascript">
function validar() {
var name = form1.name.value;
if (name == "") {
var cont = "Informe seu nome";
document.getElementById("msg").innerHTML = cont;

form1.name.style.backgroundColor="#FFDAB9";

form1.name.style.color="#363636";
msg.style.color="#ff0000";

form1.name.focus();
return false;
}
var email = form1.email.value;
if (email == "") {
var cont = "Informe seu e-mail";
document.getElementById("msg").innerHTML = cont;

form1.email.style.backgroundColor="#FFDAB9";

form1.email.style.color="#363636";
msg.style.color="#ff0000";

form1.email.focus();
return false;
}
var text = form1.text.value;
if (text == "") {
var cont = "Digite sua mensagem";
document.getElementById("msg").innerHTML = cont;

form1.text.style.backgroundColor="#FFDAB9";

form1.text.style.color="#363636";
msg.style.color="#ff0000";

form1.text.focus();
return false;
}
}
function apagar() {
var name = form1.name.value;
if (name == "") {
var cont = "";
document.getElementById("msg").innerHTML = cont;

form1.name.style.backgroundColor="#fbfbfb";

form1.name.style.color="#363636";

form1.name.focus();
return false;
}
var email = form1.email.value;
if (email == "") {
var cont = "";
document.getElementById("msg").innerHTML = cont;

form1.email.style.backgroundColor="#fbfbfb";

form1.email.style.color="#363636";

form1.email.focus();
return false;
}
var text = form1.text.value;
if (text == "") {
var cont = "";
document.getElementById("msg").innerHTML = cont;

form1.text.style.backgroundColor="#fbfbfb";

form1.text.style.color="#363636";

form1.text.focus();
return false;
}
}
</script>
 <script type="text/javascript">
jQuery(document).ready(function(){
 jQuery('#form1').submit(function(){
 var dados = jQuery( this ).serialize();
 jQuery.ajax({
 type: "POST",
 url: "../(AQUI O ARQUIVO PHP QUE ENVIA)",
 data: dados,
 success: function envio()
 {
 var cont = "Mensagem enviada com sucesso";
 document.getElementById("msg").innerHTML = cont;
msg.style.color="#55A13C";
 }
 });

 return false;
 });
});
</script>

Coloquei as cores para facilitar a identificação no script e possíveis alterações para outras necessidades.
Lembrando que as mensagens e as cores dos campos são modificadas no script acima, não no css.

Veja o exemplo em minha página http://bamboo.16mb.com/nossos-contatos