Validação de formulários com Spry
Gosto muito da facilidade de aplicação e da economia de tempo que o Spry proporciona na validação de formulários.
O interessante é que esta validação é feita do lado cliente, ou seja é utilizado o processamento da máquina de quem está no formulário. É importante dizer que as principais validações devem ser feitas também no lado servidor, para garantir que os dados são realmente o que você precisa. A validação no lado servidor pode ser feita em PHP, ColdFusion, ASP ou qualquer outra linguagem que não interfere na validação inicial do formulário em Spry.
Vou mostrar agora, alguns exemplos básicos e até algumas personalizações que você pode fazer.
Neste exemplo vamos abordar:
- Textos obrigatórios: inputs com preenchimento obrigatório;
- Campos de datas e horas: com escolha do formato e validação no preenchimento, forçando o usuário a preencher somente com números;
- Selects;
- Texto com preenchimento mínimo: mais usados em senhas;
- Textarea com preenchimento mínimo;
- Checkbox: para aqueles formulários que é necessário marcar que leu alguma coisa pra prosseguir.
Veja a baixo como é o painel de configuração do Spry para input do tipo text.
Painel de configuração do Spry para input do tipo text
O código na página fica bem enxuto:
<script type=”text/javascript”>
<!–
var sprytextfield1 = new Spry.Widget.ValidationTextField(”sprytextfield1″);
var sprytextfield2 = new Spry.Widget.ValidationTextField(”sprytextfield2″, “date”, {format:”dd/mm/yyyy”, useCharacterMasking:true});
var sprytextfield3 = new Spry.Widget.ValidationTextField(”sprytextfield3″, “time”, {useCharacterMasking:true});
var spryselect1 = new Spry.Widget.ValidationSelect(”spryselect1″);
var sprytextfield4 = new Spry.Widget.ValidationTextField(”sprytextfield4″, “none”, {minChars:10});
var sprytextarea1 = new Spry.Widget.ValidationTextarea(”sprytextarea1″, {minChars:50, counterType:”chars_count”, counterId:”countsprytextarea1″, validateOn:["change"], maxChars:500});
var sprycheckbox1 = new Spry.Widget.ValidationCheckbox(”sprycheckbox1″);
//–>
</script>
Agora como seu formulário fica se tentar enviar o formulário, sem que as condições que você configurou, fica para o usuário.
Como seu formulário fica se tentar enviar o formulário, sem que as condições que você configurou, fica para o usuário.
Você pode conferir um exemplo aqui.
Mas existem algumas condições em que necessitamos validar o formulário que não estão definidas na biblioteca do Spry.
Vou mostrar outra forma onde você pode mesclar a validação do Spry com validações personalizadas via javascript, isso é possível se utilizarmos o método validate() do Spry.
Neste exemplo, vou fazer a confirmação de texto, muito usada na confirmação da senha digitada. Simplesmente vou verificar se o conteúdo de um input é igual ao outro.
Você pode conferir um exemplo aqui.
Agora, o conteúdo do código fica mais extenso, pois a validação é feita de forma manual e incrementando as funções que desenvolvemos.
<script type=”text/javascript”>
function validar(){
//Travando o botão pra evitar vários cliques
document.getElementById(”button”).disabled = true;
var vali1 = sprytextfield1.validate();
var vali2 = sprytextfield2.validate();
var vali3 = sprytextfield3.validate();
var vali4 = sprytextfield4.validate();
var vali5 = spryselect1.validate();
var vali6 = sprytextarea1.validate();
var vali7 = sprycheckbox1.validate();
if(vali1 && vali2 && vali3 && vali4 && vali5 && vali6 && vali7 && conteudoIgual()){
document.getElementById(”form1″).submit();
} else {
alert(”Favor preencher corretamente todos os campos obrigatórios!”);
document.getElementById(”button”).disabled = false;
}
}
function conteudoIgual(){
if(document.getElementById(’text1′).value == document.getElementById(’text1_c’).value)
return true;
else
return false;
}
<!–
var sprytextfield1 = new Spry.Widget.ValidationTextField(”sprytextfield1″);
var sprytextfield2 = new Spry.Widget.ValidationTextField(”sprytextfield2″, “date”, {format:”dd/mm/yyyy”, useCharacterMasking:true});
var sprytextfield3 = new Spry.Widget.ValidationTextField(”sprytextfield3″, “time”, {useCharacterMasking:true});
var sprytextfield4 = new Spry.Widget.ValidationTextField(”sprytextfield4″, “none”, {minChars:10});
var spryselect1 = new Spry.Widget.ValidationSelect(”spryselect1″);
var sprytextarea1 = new Spry.Widget.ValidationTextarea(”sprytextarea1″, {minChars:50, counterType:”chars_count”, counterId:”countsprytextarea1″, validateOn:["change"], maxChars:500});
var sprycheckbox1 = new Spry.Widget.ValidationCheckbox(”sprycheckbox1″);
//–>
</script>
É claro que este exemplo é muito simples, mas muitos formulários possuem entrada de validação de CPF, CNPJ, data de nascimento, até mesmo integrações com funções AJAX. Para essas verificações já existem bastantes funções prontas na Web é só você pesquisar e implementar junto ao Spry.
Segue os fontes, onde vocês verão como foi feito os códigos de validação das duas formas.
