Validar todo o form de maneira dinâmica

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

[ Hits: 13.915 ]

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

Documentando seus programas PHP

Portabilidade de métodos construtores em PHP

Leitura recomendada

Live Bookmarks no Firefox

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

Campo obrigatório HTML + Javascript

Como recuperar uma senha salva no Chrome ou Firefox

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

  

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