Arquivo de October 17th, 2007

17
Oct

Como validar um formulário em JavaScript

Neste artigo usarei um trecho de codigo de um colega meu, Peixinho.

É bem simples existe uma classe de validação de formulário chamada Form.js. Recomendo que deixe em um arquvio externo mas também pode ser usado na própria tag <script> do HTML.

Essa “classe” têm dois metodos, um que é o próprio metodo de validação, validate,  e outro que é um metodo setType que é onde você cria o algoritimo de validação. Ela varre o formulário através do metodo validate que procura compos tipo input, select ou qualquer outra tag de entrada de dados pelo atributo class do prórpio controle, por exemplo: Você quer validar um campo onde o tipo dele é data, seu HTNL ficará mais ou menos assim:

<input type=’text’ size=’12′maxlength=’10′ class=’data’>

Método Validate :

Validacoes.validate = function(formTarget){
     var fields = formTarget.elements;
     for (var i=0; i < fields.length ; i++){
        var className = fields[i].className.toString();
        if (!className in Validacoes || className== “”)
           continue;
     if ( !Validacoes[className](fields[i]))
        return false;
   
     }
     return true;
 }

Método setType já com alguns tipos implantados:

var Validacoes = {
setType: function(type, func){
this[type] = func;
},
Date: function(field){
var reData = /(([0-2][0-9])|([3][0-1]))[/](([0][0-9])|([1][0-2]))[/][0-9]{4}/;
return reData.test(field.value);
},
Number:function(field){
return (field.value != ” && !isNaN(field.value))
},
String:function(field){
return (field.value != ”)
}
}

Agora vou colocar um exemplo de criação de tipo para validação através do setType, por exemplo ‘Data’.

Validacoes.setType(‘Data’,function(field){
var parts = field.value.split(“/”);
if (parts.length != 3)
return false;var i = 0;
for (i=0 ; i < parts.length ; i++){
if (isNaN(parts[i]))
return false;
}
var dia = parts[0];
var mes = parts[1];
var ano = parts[2];
if (ano.toInt() < 1900)
return false;
var anoBissesto = (ano % 4) == 0 ? true : false;
if ((mes < 0) || (mes > 12))
return false;
var mesPar = (mes % 2) == 0 ? true : false;
var maxDias = 0;
if (mes == 2){
maxDias = anoBissesto ? 29 : 28 ;
} else {
maxDias = mesPar ? 30 : 31;
}
if (dia < 0 || dia > maxDias)
return false;
else
return true;
}
);

Depois de tudo implantado é só chamar o método validate antes do Submit e se ele retornar true, manda gravar!

É isso aew…

Obrigado a todos … Valew Peixinho, e esperem por novos macetes.

GOD BLESS US!
ONLY WAY!

Download:
form.js





October 2007
S M T W T F S
« Sep   Nov »
 123456
78910111213
14151617181920
21222324252627
28293031