lipelopeslage/valida_cor.html

## valida_cor.html
<!doctype html>
<html>
  <head></head>
  <body>
Hexadecimal vai de 0-9 e de A-F,
para ser válido, a conversão de um hexadecimal em inteiro deve
ser entre 0(0) e 255(F).<br>
Para validar o hexadecimal, é preciso checar caractere por caractere.
<div id="formulario">
  <!--
      'onsubmit' retorna a função de envio
    -->
  <form name="cor" onsubmit="return mudaCorForm()">
    #
    <input type="text" name="hexadecimal">
    <br>
    <!--
      botão dentro do form, é melhor não ter ´onclick´
    -->
    <button>Muda cor (formulário)</button>
  </form><br>
  <!--
    botão fora do form pode usar 'onclick' a vontade
  -->
  <button onclick="mudaCor()">Muda cor (fora do formulário)</button>
</div>

<script>
function mudaCor(){
  // função que é chamada pelo 'onclick'
  var form = document.forms["cor"];
  var hexa = form["hexadecimal"].value;
  var erro = false;
  if(hexa.length == 6){
    for(var i = 0; i < hexa.length; i++){
      // converte cada caractere de hexa pra inteiro e
      // já verifica se o valor deles está entre 0 e 255
      if(parseInt(hexa[i], 16) >= 0
        && parseInt(hexa[i],16) <= 255){
        // se estiver entre 0 e 255, tudo certo
      }else{
        // caso contrário, quebra o loop e ativa
        // o erro atribuindo seu valor como 'true'.
        // Obs.: 'G' não é hexa, pois seu parseInt(16) é NaN,
        // por isso também não cai nas condições acima
        erro = true;
        break;
      }
    }
  }else{
    // apenas quando nao tiver 6 dígitos
    alert("É preciso ao menos 6 dígitos");
  }
  if(erro == true){
    // se o valor de erro for 'true'
    alert("Valor inválido");
  }else{
    // pega a div e muda a cor de fundo. no form não estamos
    // digitando a cor com '#', portanto precisamos concatená-la
    // ao valor digitado para poder funcionar na hora de aplicar
    // o estilo ao elemento
    document.querySelector("#formulario").style.backgroundColor = "#"+hexa;
  }
}

// essa é chamada dentro do form,
// com o clico do button que está nele
// chamada pelo 'onsubmit'
function mudaCorForm(){
  mudaCor();
  return false; // evita o refresh da página
}
</script>
</body>
</html>
	<!doctype html>
	<html>
	<head></head>
	<body>
	Hexadecimal vai de 0-9 e de A-F,
	para ser válido, a conversão de um hexadecimal em inteiro deve
	ser entre 0(0) e 255(F).<br>
	Para validar o hexadecimal, é preciso checar caractere por caractere.
	<div id="formulario">
	<!--
	'onsubmit' retorna a função de envio
	-->
	<form name="cor" onsubmit="return mudaCorForm()">
	#
	<input type="text" name="hexadecimal">
	<br>
	<!--
	botão dentro do form, é melhor não ter ´onclick´
	-->
	<button>Muda cor (formulário)</button>
	</form><br>
	<!--
	botão fora do form pode usar 'onclick' a vontade
	-->
	<button onclick="mudaCor()">Muda cor (fora do formulário)</button>
	</div>

	<script>
	function mudaCor(){
	// função que é chamada pelo 'onclick'
	var form = document.forms["cor"];
	var hexa = form["hexadecimal"].value;
	var erro = false;
	if(hexa.length == 6){
	for(var i = 0; i < hexa.length; i++){
	// converte cada caractere de hexa pra inteiro e
	// já verifica se o valor deles está entre 0 e 255
	if(parseInt(hexa[i], 16) >= 0
	&& parseInt(hexa[i],16) <= 255){
	// se estiver entre 0 e 255, tudo certo
	}else{
	// caso contrário, quebra o loop e ativa
	// o erro atribuindo seu valor como 'true'.
	// Obs.: 'G' não é hexa, pois seu parseInt(16) é NaN,
	// por isso também não cai nas condições acima
	erro = true;
	break;
	}
	}
	}else{
	// apenas quando nao tiver 6 dígitos
	alert("É preciso ao menos 6 dígitos");
	}
	if(erro == true){
	// se o valor de erro for 'true'
	alert("Valor inválido");
	}else{
	// pega a div e muda a cor de fundo. no form não estamos
	// digitando a cor com '#', portanto precisamos concatená-la
	// ao valor digitado para poder funcionar na hora de aplicar
	// o estilo ao elemento
	document.querySelector("#formulario").style.backgroundColor = "#"+hexa;
	}
	}

	// essa é chamada dentro do form,
	// com o clico do button que está nele
	// chamada pelo 'onsubmit'
	function mudaCorForm(){
	mudaCor();
	return false; // evita o refresh da página
	}
	</script>
	</body>
	</html>