Validações JavaScript

Eae galera. Faz tempo que não posto nada, dessa vez a dúvida é meio chatinha…javascript…eu fiz um arquivo funcoes.js, e toquei tudo que é validação que eu faço mais repetidamente lá dentro…ai embaixo ta o código dela, usem e abusem :D. Lembrando é claro que qualquer otimização/dica/dúvida/sugestão é só falar :wink:

PS: É pra funcionar tanto no IE quanto em Mozilla/FF…mas sabe como são essas coisas… :stuck_out_tongue:

[code]/*
Padawan’s JavaScript-Mega-Validator 3000+
Todos os direitos reservados para Diego Pires Plentz
Você pode usar esse código nas suas páginas desde que mantenha os créditos :wink:
*/

//Verifica qual o browser do visitante e armazena na variável púbica clientNavigator,
//Caso Internet Explorer(IE) outros (Other)
if (navigator.appName.indexOf(‘Microsoft’) != -1){
clientNavigator = “IE”;
}else{
clientNavigator = “Other”;
}
function Verifica_Data(data, obrigatorio){
//Se o parâmetro obrigatório for igual à zero, significa que elepode estar vazio, caso contrário, não
var data = document.getElementById(data);
var strdata = data.value;
if((obrigatorio == 1) || (obrigatorio == 0 && strdata != “”)){
//Verifica a quantidade de digitos informada esta correta.
if (strdata.length != 10){
alert("Formato da data não é válido.
Formato correto:

  • dd/mm/aaaa.");
    data.focus();
    return false
    }
    //Verifica máscara da data
    if ("/" != strdata.substr(2,1) || “/” != strdata.substr(5,1)){
    alert("Formato da data não é válido.
    Formato correto:
  • dd/mm/aaaa.");
    data.focus();
    return false
    }
    dia = strdata.substr(0,2)
    mes = strdata.substr(3,2);
    ano = strdata.substr(6,4);
    //Verifica o dia
    if (isNaN(dia) || dia > 31 || dia < 1){
    alert(“Formato do dia não é válido.”);
    data.focus();
    return false
    }
    if (mes == 4 || mes == 6 || mes == 9 || mes == 11){
    if (dia == “31”){
    alert(“O mês informado não possui 31 dias.”);
    data.focus();
    return false
    }
    }
    if (mes == “02”){
    bissexto = ano % 4;
    if (bissexto == 0){
    if (dia > 29){
    alert(“O mês informado possui somente 29 dias.”);
    data.focus();
    return false
    }
    }else{
    if (dia > 28){
    alert(“O mês informado possui somente 28 dias.”);
    data.focus();
    return false
    }
    }
    }
    //Verifica o mês
    if (isNaN(mes) || mes > 12 || mes < 1){
    alert(“Formato do mês não é válido.”);
    data.focus();
    return false
    }
    //Verifica o ano
    if (isNaN(ano)){
    alert(“Formato do ano não é válido.”);
    data.focus();
    return false
    }
    }
    }

function Compara_Datas(data_inicial, data_final){
//Verifica se a data inicial é maior que a data final
var data_inicial = document.getElementById(data_inicial);
var data_final = document.getElementById(data_final);
str_data_inicial = data_inicial.value;
str_data_final = data_final.value;
dia_inicial = data_inicial.value.substr(0,2);
dia_final = data_final.value.substr(0,2);
mes_inicial = data_inicial.value.substr(3,2);
mes_final = data_final.value.substr(3,2);
ano_inicial = data_inicial.value.substr(6,4);
ano_final = data_final.value.substr(6,4);
if(ano_inicial > ano_final){
alert(“A data inicial deve ser menor que a data final.”);
data_inicial.focus();
return false
}else{
if(ano_inicial == ano_final){
if(mes_inicial > mes_final){
alert(“A data inicial deve ser menor que a data final.”);
data_final.focus();
return false
}else{
if(mes_inicial == mes_final){
if(dia_inicial > dia_final){
alert(“A data inicial deve ser menor que a data final.”);
data_final.focus();
return false
}
}
}
}
}
}

function Verifica_Hora(hora, obrigatorio){
//Se o parâmetro obrigatório for igual à zero, significa que elepode estar vazio, caso contrário, não
var hora = document.getElementById(hora);
if((obrigatorio == 1) || (obrigatorio == 0 && hora.value != “”)){
if(hora.value.length < 5){
alert(“Formato da hora inválido.
Por favor, informe a hora no formato correto: hh:mm”);
hora.focus();
return false
}
if(hora.value.substr(0,2) > 23 || isNaN(hora.value.substr(0,2))){
alert(“Formato da hora inválido.”);
hora.focus();
return false
}
if(hora.value.substr(3,2) > 59 || isNaN(hora.value.substr(3,2))){
alert(“Formato do minuto inválido.”);
hora.focus();
return false
}
}
}

function Verifica_Email(email, obrigatorio){
//Se o parâmetro obrigatório for igual à zero, significa que elepode estar vazio, caso contrário, não
var email = document.getElementById(email);
if((obrigatorio == 1) || (obrigatorio == 0 && email.value != “”)){
if(!email.value.match(/([a-zA-Z0-9.-]+@[a-zA-Z0-9.-]+.[a-zA-Z0-9._-]+)/gi)){
alert(“Informe um e-mail válido”);
email.focus();
return false
}
}
}

function Verifica_Tamanho(campo, tamanho){
//usado para campos textarea onde não se tem o atributo maxlenght
var campo = document.getElementById(campo);
if(campo.value.length > tamanho){
alert(“O campo suporta no máximo " + tamanho + " caracteres.”);
campo.focus();
return false
}
}

function Verifica_Cep(cep, obrigatorio){
//Se o parâmetro obrigatório for igual à zero, significa que elepode estar vazio, caso contrário, não
var cep = document.getElementById(cep);
var strcep = cep.value;
if((obrigatorio == 1) || (obrigatorio == 0 && strcep != “”)){
if (strcep.length != 9){
alert(“CEP informado inválido.”);
cep.focus();
return false
}else{
if (strcep.indexOf("-") != 5){
alert(“Formato de CEP informado inválido.”);
cep.focus();
return false
}else{
if (isNaN(strcep.replace("-",“0”))){
alert(“CEP informado inválido.”);
cep.focus();
return false
}
}
}
}
}

function Bloqueia_Caracteres(evnt){
//Função permite digitação de números
if (clientNavigator == “IE”){
if (evnt.keyCode < 48 || evnt.keyCode > 57){
return false
}
}else{
if ((evnt.charCode < 48 || evnt.charCode > 57) && evnt.keyCode == 0){
return false
}
}
}

function Ajusta_Data(input, evnt){
//Ajusta máscara de Data e só permite digitação de números
if (input.value.length == 2 || input.value.length == 5){
if(clientNavigator == “IE”){
input.value += “/”;
}else{
if(evnt.keyCode == 0){
input.value += “/”;
}
}
}
//Chama a função Bloqueia_Caracteres para só permitir a digitação de números
return Bloqueia_Caracteres(evnt);
}

function Ajusta_Hora(input, evnt){
//Ajusta máscara de Hora e só permite digitação de números
if (input.value.length == 2){
if(clientNavigator == “IE”){
input.value += “:”;
}else{
if(evnt.keyCode == 0){
input.value += “:”;
}
}
}
//Chama a função Bloqueia_Caracteres para só permitir a digitação de números
return Bloqueia_Caracteres(evnt);
}

function Ajusta_Cep(input, evnt){
//Ajusta máscara de CEP e só permite digitação de números
if (input.value.length == 5){
if(clientNavigator == “IE”){
input.value += “-”;
}else{
if(evnt.keyCode == 0){
input.value += “-”;
}
}
}
//Chama a função Bloqueia_Caracteres para só permitir a digitação de números
return Bloqueia_Caracteres(evnt);
}

function Atualiza_Opener(){
//Atualiza a página opener da popup que chamar a função
window.opener.location.reload();
}[/code]

é só salvar esse blocão de texto num arquivo funcoes.js por exemplo e “importar” ele nas páginas(pra quem não sabe <script language=“JavaScript” type=“text/javascript” src="…/inc/funcoes.js"></script> ) que desejarem usar as funções…pra utilizar é bem simples…nas de validação é só adicionar algo do tipo
if(Verifica_Cep(“cep”, 0) == false){ return false }
if(Verifica_Email(“email”, 0) == false){ return false }
if(Verifica_Data(“data_nascimento”, 1) == false){ return false }

dentro da validação principal da sua página…ficaria algo do tipo

function Valida(){ if(document.formulario.nome.value == ""){ alert("Preencha o nome da pessoa"); } if(Verifica_Data("data_nascimento", 1) == false){ return false } if(Verifica_Hora("hora_compromisso", 1) == false){ return false } if(Verifica_Cep("cep", 0) == false){ return false } if(Verifica_Email("email", 0) == false){ return false } if(Verifica_Email("descricao", 4000) == false){ return false } }

Lembrando que os campos precisam ter preenchido o atributo id para que validação funcione.
Para validar algumas coisas direto no campo é só usar:

<input name="data" type="text" id="data" maxlength="10" onKeypress="return Ajusta_Data(this, event);"> 
<input name="hora" type="text" id="hora" maxlength="5" onKeypress="return Ajusta_Hora(this, event);"> 
<input name="cep" type="text" id="cep" maxlength="9" onKeypress="return Ajusta_Cep(this, event);">
<input name="numero" type="text" id="numero" maxlength="20" onKeypress="return Bloqueia_Caracteres(event);""> 

Queria saber se tem alguma forma + curta ou melhor de validar os campos, sem precisar usar isso

if(Verifica_Email(“descricao”, 4000) == false){ return false }

por exemplo

Muito util!!!
Valeu mesmo!
:lol:

Valeu cara :smiley: tava enrolaaando pra fazer essa checagem de data … hehe valeu mesmo :smiley:

Valeu kra por compartilhar conosco.

Valeu os elogios ai pessoal, mas ninguém sabe se tem algum jeito de fazer melhor a validação não(ou da uma melhoradinha no código)? :wink:

E ae GURI… :wink:

Valeu a citação. :smiley:

AuAhAUaHuahauhaUhauAHuahAU heheh …

Quanto a jeito melhor … bem … tem o tal do XForms, mas nunca usei.
http://www.w3.org/MarkUp/Forms/

E alguns frameworks web (WebWork2) possuem algum mecanismo de validação no lado cliente.

[quote=“LIPE”]
Quanto a jeito melhor … bem … tem o tal do XForms, mas nunca usei.
http://www.w3.org/MarkUp/Forms/

E alguns frameworks web (WebWork2) possuem algum mecanismo de validação no lado cliente.[/quote]

Não não, to falando de jeito melhor com JScript mesmo, tipo, alguam forma de deixar o fonte ali mais claro, simples, curto, sei lá,hehe

if(Verifica_Email("descricao", 4000) == false){ return false } 

É meio besta… mas voce pode encurtar assim

return (Verifica_Email("descricao", 4000));

hum

então estuda regular expressions :smiley: é chato mas é bom \o/

[quote=“Nati”]if(Verifica_Email("descricao", 4000) == false){ return false }

É meio besta… mas voce pode encurtar assim

return (Verifica_Email("descricao", 4000));

Nati, assim funciona somente em alguns casos, mas em uma verificação do tipo

[code]function Verifica_Dados(){
var formulario = document.formulario;

return (Verifica_Cep(“paciente1_cep”, 0));
return (Verifica_Data(“paciente1_data_nasc”, 1));
return (Verifica_Email(“paciente1_email”, 0));
return (Verifica_Data(“paciente2_data_nasc”, 0));
return (Verifica_Email(“paciente2_email”, 0));
formulario.action = “confirma_paciente.asp”;
formulario.submit();
}
[/code]

Da “pau” :frowning:

Só para deixar um recado, um dia eu ainda descobro quem foi o baiano da Microsoft que ficou com “preguiça” de implementar o event.target no IE!

UPDATE: Versão atualizada em http://plentz.org/unsorted/functions.js.html

Bem pessoal eu desenvolvi uma validação que acho eu ser melhor que essa, LONGE de mim te sacanear Plentz :slight_smile: até pq eu peguei uma validação sua e por isso que estou aqui HEHEHE Mas com a minha validação não precisa nem saber javascript pra fazer só precisa de algum conhecimento de expressão regular que não é nada difícl (Aqui na empresa onde eu trabalho depois que eu fiz essa validação até design começou a fazer validação nos HTML que eles nos enviam)! E se quiser posso mandar uma apostilinha que eu mesmo fiz de Expressão Regular pra quem não conhece! HEHEHE… vou colocar um exemplo de como usar aqui e o arquivo vai em anexo!

456 Bem como podem ver basta colocar no onSubmit do form a chamada da minha função e definir dentro dos inputs mesmo essa 4 novos atributos inventados por mim! required -> se o campo é de preenchimento obrigatório, requiredmsg -> Caso o campo seja obrigatório e não estaja prenchido da essa msg de erro, mascara -> onde deve ser colocada a ER pra validar o campo ou uma função qualquer desenvolvida por vc que retorna True ou False (No formato STRING), e por ultimo o atributo errormsg que é a msg de erro para quando a validação retorna false. Bem pessoal funciona tanto no IE quanto no FF mas se alguem achar alguma falha gostaria muito que me avisassem. Muito obrigado e qualquer coisa me mandem e-mail terei o maior prazer em ajudar quem precise :)

Isso não poderia ser parte de uma BrazilUtils API de Javascript ?

function Valida(){ if(document.formulario.nome.value == ""){ alert("Preencha o nome da pessoa"); } if(Verifica_Data("data_nascimento", 1) == false){ return false } if(Verifica_Hora("hora_compromisso", 1) == false){ return false } if(Verifica_Cep("cep", 0) == false){ return false } if(Verifica_Email("email", 0) == false){ return false } if(Verifica_Email("descricao", 4000) == false){ return false } }

substituir os ifs por returns não vai funcionar pois vc quer validar TUDO. uma função termina na instrução return. seria melhor fazer:

function Valida(){ if(document.formulario.nome.value == ""){ alert("Preencha o nome da pessoa"); return false; } return (Verifica_Data("data_nascimento", 1) && (Verifica_Hora("hora_compromisso", 1) && (Verifica_Cep("cep", 0) && (Verifica_Email("email", 0) && (Verifica_Email("descricao", 4000)); }

Poxa galera ninguem se habilitou a testar a minha validação HEHEHE Poxa garanto que se testarem vão gostar HEHEHE…

Uma dica pra você… Eu costumo usar uma técnica conhecida no javascript como Behavior, que consiste basicamente em usar seletores CSS para definir comportamento. Por exemplo:

Para um campo com validação de data.

Para vazer a validação, basta buscar os elementos do form que contém uma determinada classe e validar. Usando prototype (http://prototype.conio.net/) isso fica facinho…

var elements = document.getElementsByClassName('validate-data');
elements.each(
     function validateElement(element) {
          // verificar se o valor do elemento é válido
     }
);

Depois é só usar um observer (http://www.sergiopereira.com/articles/prototype.js.html#Form.Observer) para escutar o evento onsubmit do form.

[quote=ivon]Poxa galera ninguem se habilitou a testar a minha validação HEHEHE Poxa garanto que se testarem vão gostar HEHEHE…[/quote]A idéia é interessante, mas torna o HTML inválido (http://validator.w3.org), já que não existem campos como required ou errorMsg nos componentes HTML. E, acredite, isso é importante.

Plentz, não sei se é mais “entendível”, mas eu costumo utilizar essa para digitação de números, porque habilita o backspace e as setas para os lados

e é cross-browser

[code]/*
Uso:

onKeyPress=“return SemLetras(event);”

*/

function SemLetras(evtKeyPress) {
var nTecla;
nTecla = (evtKeyPress.which) ? evtKeyPress.which : evtKeyPress.keyCode;

if((nTecla > 47 && nTecla < 58)||(nTecla == 8)||(nTecla == 9)||(nTecla == 37)||(nTecla == 39)||(nTecla == 46)){
	return true;
}else{
	return false;
}

}[/code]

Aproveitando o gancho como fazer isso funcionar em todos os browsers?

event.returnValue = false;