confirmação de formulário

[Fogomax 1]

Eu estou criando um site e no decorrer do caminho eu achei esse problema, não consigo validar meu formulário. Sempre quando um campo está correto, o background-color do input fica verde (#ccffcc), então quero fazer um botão que verifique se todos os campos estão verdes, se um não estiver, manda uma mensagem de erro.

Mas o problema é que quando clico no botão nada acontece.

Código JavaScript:

function check_all() {
  var campo1 = document.GetElementByID("username");
  var campo2 = document.GetElementByID("senha");
  var campo3 = document.GetElementByID("repsenha");
  var campo4 = document.GetElementByID("email");
  var campo5 = document.GetElementByID("repemail");

  if (campo1.style.backgroundColor && campo2.style.backgroundColor && campo3.style.backgroundColor && campo4.style.backgroundColor && campo5.style.backgroundColor == '#ccffcc') {
	  document.forms["registro_form"].submit();
  } else {
	  alert("Os campos não foram preenchidos corretamente!");
  }
}

Alguem pode me ajudar?

[William Bruno 1501]

tem alguns errinhos. getElement começa com o G em minúsculo. E o D do ID é minúsculo tb.

 

Assim:

 var campo1 = document.getElementById("username");

 

Além disso q eu falei, o IF precisa ser completo:

if (campo1.style.backgroundColor == '#ccffcc' && 
campo2.style.backgroundColor == '#ccffcc' && 
campo3.style.backgroundColor == '#ccffcc' && 
campo4.style.backgroundColor == '#ccffcc' && 
campo5.style.backgroundColor == '#ccffcc')

 

 

Só que tecnicamente, é esquisito verificar a "cor". Verifique o erro. Mais simples.

 

 

Para te ajudar a escrever códigos js, aperte Ctrl+Shift+J no Firefox.

O console de erros vai te mostrar o motivo de não funcionar. Leia:

http://wbruno.com.br/2011/03/31/como-debugar-javascript-firefox-erros-comuns/

[Fogomax 1]

Eu tentei usar esse código, mas eu clico no botão ele dá a mensagem que é para aparecer quando os campos não estão verdes. Como eu faço isso?

[Vadio 13]

http://jsfiddle.net/eric_freitas/cpNKj/

 

function check_all() {
   var campo = new Array();
   campo[0] = document.getElementById("username");
   campo[1] = document.getElementById("senha");
   campo[2] = document.getElementById("repsenha");
   campo[3] = document.getElementById("email");
   campo[4] = document.getElementById("repemail");    

   if (validaBackgroundColor(campo)) document.forms["registro_form"].submit();
   else return false;

   return true;
}
function validaBackgroundColor(arr){
   for(i in arr){
       if(arr[i].style.backgroundColor == "#ccffcc") return false;
   }
   return true;
}

[Fogomax 1]

http://jsfiddle.net/eric_freitas/cpNKj/

 

function check_all() {
   var campo = new Array();
   campo[0] = document.getElementById("username");
   campo[1] = document.getElementById("senha");
   campo[2] = document.getElementById("repsenha");
   campo[3] = document.getElementById("email");
   campo[4] = document.getElementById("repemail");    

   if (validaBackgroundColor(campo)) document.forms["registro_form"].submit();
   else return false;

   return true;
}
function validaBackgroundColor(arr){
   for(i in arr){
       if(arr[i].style.backgroundColor == "#ccffcc") return false;
   }
   return true;
}

Mesmo com os campos em vermelho (#ffcccc), ele redireciona para a página que vai cadastrar os dados no MySQL. Como faço para ele falar que está errado se pelo menos um estiver errado e falar que esta certo(redirecionar) quando todos estão verdes?

[Vadio 13]

difícil viu. melhor fazer a validação do campo pelo valor.

 

o backgroundColor só retorna algum valor (em RBG ex: rbg(999,999,999)) e se o valor estiver no "style" do elemento.

se você usar uma classe ou id como seletor css ele retorna backgroundColor = ''

 

então essa forma de validação se torna inválida.

 

o código rbg para a cor "#ccffcc" é "rbg(204,255,204)"

 

bons estudos

[Fogomax 1]

@Edit:

Vadio, não sei se é um erro, mas o código funcionou corretamente quando troquei:

if(arr[i].style.backgroundColor == 'rgb(204, 255, 204)')

Por:

if(arr[i].style.backgroundColor != 'rgb(204, 255, 204)')

Obrigado pela ajuda, faz tempo que não mexo com JavaScript, e também sou iniciante em programação, obrigado por sua atenção! :D