Programação web

Pessoal criar a validação dos campos com js é bem chato e gasta muito tempo! Certo? então vamos utilizar a validationEngine ela é muito simples de ser usada e existe vários tipos de validação já prontos como data, quantidade de caracteres, valores etc..

Vou mostrar um exemplo bem simples para facilitar o entendimento

Primeiro  inclua a biblioteca Jquery

<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>

Depois vamos incluir o CSS do validation. Este é responsável  pelo layout  do “balões com as mensagens de erro “, se você entende um pouco de CSS editara com facilidade.

<link href="css/validationEngine.jquery.css" rel="stylesheet" type="text/css" />

Vamos incluir  os arquivos  que fazem a verificação e monta as mensagens de erro. O jquery.validationEngine-pt é responsável pelas mensagens de erro em português , ou seja quer editar o texto dos alertas? Abra este arquivo ele é um ” js” de fácil entendimento e edição.

<script src="js/jquery.validationEngine-pt.js" type="text/javascript"></script>

Este arquivo monta toda validação  da biblioteca validationEngine

<script src="js/jquery.validationEngine.js" type="text/javascript"

Bom feito isto você deve  mostra qual formulário vai receber a validação. Dentro do $(“#form1”).validationEngine(), o #form1 é a referência do ID do  form.

<script>
$(document).ready(function() {
   $("#form1").validationEngine()
});
</script>

Vamos ao HTML

Verifique abaixo  o (id) &lt;form id='<span style=”color:#ff0000;”>form1</span>’  ele deve ser igual ao  $(“#<span style=”color:#ff0000;”>form1</span>”).validationEngine() .

<form id="<span style="color: #ff0000;">form1</span>" name="form1" method="post" action="">

Agora é só colocar  a referência a classe da biblioteca  mostrando o tipo de validação que você quer, a <span style=”color:#ff0000;”>class=”validate[required] <span style=”color:#000000;”>verifica se o campos esta vazio.</span></span>

<input type="text" name="txtNome" id="nome"class="validate[required]"/>

Para verificar um campo do tipo de e-mail <span style=”color:#ff0000;”>class=”validate[required,custom[email]] text-input”</span>

<input type="text" name="txtEmail" id="email" class="validate[required,custom[email]] text-input"/>
<input type="submit" name="button" id="button" value="ENVIAR" />
</form></div>