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