Validar todo o form de maneira dinâmica

Publicado por Breno Henrique Duarte de Oliveira em 21/11/2006

[ Hits: 13.929 ]

Blog: http://www.vipertech.com.br

 


Validar todo o form de maneira dinâmica



Olá pessoal, já vi que muita gente ainda usa a maneira tradicional para validar formulário. Exemplo: nome_do_form.nome_do_input e isso traz uma enorme dor de cabeça, imagina se seu form é enorme e você tem que validar todos os campos? Sem dúvida é um trabalho muito tedioso, mas que podemos resolver com algumas combinações.

O método W3C DOM oferece o getElementsByTagName(). Esse método faz uma varredura na sua página ou local e retorna um array dos elementos encontrados.

Minha página é enorme e nem todos os inputs são do mesmo formulário?

Não tem problema, podemos colocar um id no form e utilizando o getElementById() pegaremos o form exata. Ficaria assim nosso JavaScript:

var local = document.getElementById('id_do_form');
var inputs = local.getElementsByTagName();

Pronto, assim selecionamos os inputs somente de uma determinada área. Já estamos com todos os nossos inputs em um array :), só temos de varrer esse array a procura de dados em branco.

Nossa função ficaria assim:

function valida ( local ){
var localValidar = document.getElementById(local);
var formulario = localValidar.getElementsByTagName("input");

for (var i=0; i < formulario.length; i++){
if (formulario[i].value == ""){
var aux = formulario[i].name.toUpperCase();
alert ("O campo " + aux + " deve ser preenchido");
formulario[i].focus();
return false;
}
}
return true;
}

Bom pessoal, é isso ai...

http://www.vipertech.com.br

Outras dicas deste autor

Portabilidade de métodos construtores em PHP

Documentando seus programas PHP

Leitura recomendada

Calendário JavaScript em 3 passos

Enviando dados em formulário através de variáveis ocultas

Live Bookmarks no Firefox

Erro acesso a Site da Receita Federal - Certificação Digital

Máscara simples em JavaScript

  

Comentários
[1] Comentário enviado por lucas.suporte em 21/11/2006 - 10:34h

Loco boa dica !!!!!!!!!!!!!!

[2] Comentário enviado por hebertphp em 21/11/2006 - 13:34h

Realmente muito boa dica....vai facilitar muito o processo de validação..

[3] Comentário enviado por lesantana em 27/01/2012 - 14:43h

Olá Breno,

Já faz um bom tempo deste Post aqui no VOL, como ele me foi útil resolvi comentar.

Tomei a liberdade e efetuei algumas melhorias no seu código e venho aqui posta e compartilhar essa informação, com toda a comunidade.

ai vai

function valida(name,borda){
////////////////////////////////////////////////////////////////////////////////////////
// Modificado por: Leandro Santana //
// Data: 27/01/2012 //
// Primeira versão: Breno Henrique Duarte de Oliveira em 21/11/2006 //
// Link: http://www.vivaolinux.com.br/dica/Validar-todo-o-form-de-maneira-dinamica //
////////////////////////////////////////////////////////////////////////////////////////

var localValidar = document.getElementById(name);
var campos = new Array();
campos[0] = localValidar.getElementsByTagName("input");
campos[1] = localValidar.getElementsByTagName("textarea");
campos[2] = localValidar.getElementsByTagName("select");

for (var r=0; r < campos.length; r++){
inputs = campos[r];

for (var i=0; i < inputs.length; i++){

if(inputs[i].id.indexOf('val') == 0){

if (inputs[i].value == "" || inputs[i].id == 'val_email'){
retorno = 1;
if(inputs[i].id == 'val_email'){
if(inputs[i].value == '' || !valida_email(inputs[i].value)){
document.getElementById(inputs[i].id).style.border = '1px solid #fe3e3e';
document.getElementById('msgerro').style.display = 'block';
}else{
document.getElementById(inputs[i].id).style.border = borda;
retorno = 0;
}

}else if(inputs[i].id != 'val_email'){
document.getElementById(inputs[i].id).style.border ='1px solid #fe3e3e';
document.getElementById('msgerro').style.display = 'block';
}
}else if(inputs[i].id != 'val_email'){
document.getElementById(inputs[i].id).style.border = borda;
retorno = 0;
}

}

}
}

if(retorno){
return false;
}else{
return true;
}
}

function valida_email(email){
er = /^[a-zA-Z0-9][a-zA-Z0-9\._-]+@([a-zA-Z0-9\._-]+\.)[a-zA-Z-0-9]{2}/;
if(er.exec(email)){
return true;
} else {
return false;
}
}
Resolvi adaptar o código para que ao invés de alertas ele altera-se a cor da borda, assim também que ele fosse útil para outros tipos de campos de formulário como TextArea, Inputs, e Selects. Veja abaixo como ficou o HTML.

<form name="sinistro" id="sinistro" method="POST" onsubmit="return valida('sinistro', '1px dotted #6c4227')">

<div style="width:130px;float:left;line-height:24px;">Nome:</div>
<div style="width: 300px;float:left;"><input type="text" name="sinistro[Nome]" id="val_nome" class="form" /></div>

<div style="clear:both;"></div>
<div style="width:130px;float:left;line-height:24px;">Endereço:</div>
<div style="width: 300px;float:left;"><input type="text" name='sinistro[Endereço]' id='val_endereco' class="form" /></div>

<div style="clear:both;"></div>
<div style="width:130px;float:left;line-height:24px;">Telefone:</div>
<div style="width: 300px;float:left;"><input type="text" name='sinistro[Telefone]' id='val_phone' class="form" /></div>

<div style="clear:both;"></div>
<div style="width:130px;float:left;line-height:24px;">E-mail:</div>
<div style="width: 300px;float:left;"><input type="text" name='sinistro[E-mail]' id='val_email' class="form" /></div>

<div style="clear:both;"></div>
<input type="submit" value="Enviar" class="enviar">

</form>

A principio no HTML no campo id eu incremento o nome dele com um prefixo chamado '_val' esse prefixo serve para informar a função quais serão os campos que devem ser validados.

Outra consideração foi a passagem de parâmetros para essa função, uma que você já tinha usada e outra que eu resolvi passar o estilo da borda original, para que seja possível retomar a cor padrão quando o campo estiver validado.

Bom fica ai a dica e façam bom proveito do código.

Dúvidas fico a disposição.

Meu e-mail:leandro.santana@infosi.com.br
site:www.infosi.com.br

[4] Comentário enviado por danilooliveiraWD em 08/07/2013 - 15:01h

Excelente o código foi de grande ajuda pra mim já tinha uma base de conhecimento de como deveria ser feito porém não obtive sucesso ao criar a verificação porém nem sempre queremos validar todos os campos então resolvi implementar o código do nosso amigo Breno Henrique

function valida(local){
var localValidar = document.getElementById(local);
var formulario = localValidar.getElementsByTagName("input");

for (var i=0; i < formulario.length; i++){

var classFrm = formulario[i].className;

if(classFrm=="valid"){

if (formulario[i].value == ""){
var aux = formulario[i].name.toUpperCase();
alert ("O campo " + aux + " deve ser preenchido");
formulario[i].focus();
return false;
}

}
}
return true;

}

Com isso basta colocar um class="valid" somente nos inputs que deseja que seja validado
e pronto o script acima só irá validar os inputs com a class de nome valid

Espero ter ajudado!



Contribuir com comentário




Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner

Destaques

Artigos

Dicas

Tópicos

Top 10 do mês

Scripts