validador de formulario que altera botão no final

[horacio2009 1]

bom dia a todos!!!

pessoal, seguinte:

eu tenho um validador de formulário basicão, mas muito útil, agora, eu quero que quando TODOS os dados ESSENCIAIS estiverem preenchidos, o botão mude de vinho para verde...terei que trocar as imagens, porém, minha dúvida é:como eu faço para, dentro do validador, fazer a alteração da imagem sendo que ela aparece no meio da página apenas...

tá assim:

a imagem(no final do formulario)

 

  
<img src="img/iconeBTN.jpg"  id="button" value="Enviar" onmouseover="return Valida_1passo(this);" >  

 

 

aqui o validador de formulario(funciona direitinho!!!):

function Valida_1passo(){
if(document.compra.nome.value=="" || document.compra.nome.value.length < 4)
    {
     alert( "Preencha campo NOME corretamente!" );
     document.compra.nome.focus();
     return false;
    }


if(document.compra.cpf.value=="" )
    {
     alert( "Preencha campo cpf corretamente!" );
     document.compra.cpf.focus();
     return false;
    }


if(document.compra.cep.value=="" )
    {
     alert( "Preencha campo cep corretamente!" );
     document.compra.cep.focus();
     return false;
    }


if(document.compra.endereco.value=="" )
    {
     alert( "Preencha campo endereco corretamente!" );
     document.compra.endereco.focus();
     return false;
    }

if(document.compra.numero.value=="" )
    {
     alert( "Preencha campo numero corretamente!" );
     document.compra.numero.focus();
     return false;
    }

if(document.compra.bairro.value=="" )
    {
     alert( "Preencha campo bairro corretamente!" );
     document.compra.bairro.focus();
     return false;
    }



if(document.compra.cidade.value=="" )
    {
     alert( "Preencha campo cidade corretamente!" );
     document.compra.cidade.focus();
     return false;
    }




if(document.compra.estado.value=="" )
    {
     alert( "Preencha campo estado corretamente!" );
     document.compra.estado.focus();
     return false;
    }




if(document.compra.dddTel.value=="" )
    {
     alert( "Preencha campo ddd corretamente!" );
     document.compra.dddTel.focus();
     return false;
    }	 



if(document.compra.telefone.value=="" )
    {
     alert( "Preencha campo telefone corretamente!" );
     document.compra.telefone.focus();
     return false;
    }	 	 



if(document.compra.dddcel.value=="" )
    {
     alert( "Preencha campo ddd corretamente!" );
     document.compra.dddcel.focus();
     return false;
    }	 	 



if(document.compra.celular.value=="" )
    {
     alert( "Preencha campo celular corretamente!" );
     document.compra.celular.focus();
     return false;
    }	 	 






if(document.compra.email.value=="" )
    {
     alert( "Preencha campo email corretamente!" );
     document.compra.email.focus();
     return false;
    }	 	 



return true;
}

enfim, dentro desse validador, como faço para alterar a imagem???

obrigado a todos pela atenção!!!

Horácio

[William Bruno 1501]

document.getElementById('button').src = 'img/iconeBTN_valido.jpg';

[horacio2009 1]

eu joguei a codigo desse jeito:

function Valida_1passo(){
if(document.compra.nome.value=="" || document.compra.nome.value.length < 4)
    {
     alert( "Preencha campo NOME corretamente!" );
     document.compra.nome.focus();
     return false;
    }


if(document.compra.cpf.value=="" )
    {
     alert( "Preencha campo cpf corretamente!" );
     document.compra.cpf.focus();
     return false;
    }


if(document.compra.cep.value=="" )
    {
     alert( "Preencha campo cep corretamente!" );
     document.compra.cep.focus();
     return false;
    }


if(document.compra.endereco.value=="" )
    {
     alert( "Preencha campo endereco corretamente!" );
     document.compra.endereco.focus();
     return false;
    }

if(document.compra.numero.value=="" )
    {
     alert( "Preencha campo numero corretamente!" );
     document.compra.numero.focus();
     return false;
    }

if(document.compra.bairro.value=="" )
    {
     alert( "Preencha campo bairro corretamente!" );
     document.compra.bairro.focus();
     return false;
    }



if(document.compra.cidade.value=="" )
    {
     alert( "Preencha campo cidade corretamente!" );
     document.compra.cidade.focus();
     return false;
    }




if(document.compra.estado.value=="" )
    {
     alert( "Preencha campo estado corretamente!" );
     document.compra.estado.focus();
     return false;
    }




if(document.compra.dddTel.value=="" )
    {
     alert( "Preencha campo ddd corretamente!" );
     document.compra.dddTel.focus();
     return false;
    }	 



if(document.compra.telefone.value=="" )
    {
     alert( "Preencha campo telefone corretamente!" );
     document.compra.telefone.focus();
     return false;
    }	 	 



if(document.compra.dddcel.value=="" )
    {
     alert( "Preencha campo ddd corretamente!" );
     document.compra.dddcel.focus();
     return false;
    }	 	 



if(document.compra.celular.value=="" )
    {
     alert( "Preencha campo celular corretamente!" );
     document.compra.celular.focus();
     return false;
    }	 	 






if(document.compra.email.value=="" )
    {
     alert( "Preencha campo email corretamente!" );
     document.compra.email.focus();
     return false;
    }	 	 

return true;

document.getElementById('button').src = 'img/icone2.jpg';
}

mas ainda não foi...qual a posição certa do código da imagem?

[William Bruno 1501]

antes do return:

 

document.getElementById('button').src = 'img/icone2.jpg';
return true;

estude o básico sobre programação.