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

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

0 0

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

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

0 0

[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

0 0

[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!

0 0