VALIDADOR INTELIGENTE PARA FORMULÁRIOS

[Toni Santos 1]

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

[Renato Assis 0]

Cara cabei de testar o seu formulário no seu site e enviei de forma erroneamente e o seu form aceitou na boa o envio com preenchimento incorreto no campo email.. escrevi isso aqui no campo email "renssiaa" vc tem que configurar esse campo.