Destacar TextBox em Validaçao ? ***

[ealves 0]

kero dar um efeito no meu formulario onde na validacao , ao deixar de preencher um determinado campo , esse campo vai receber um contorno vermelho ao enviar o formulario.

 

entao assim :

 

envio o formulario, se estiver algum campo vazio , o mesmo recebera um contorno vermelho em volta e o foco ficara voltara nele indicando assim que akele campo esta errado

isso pelo que eu vi se usa DIV mais nao estou conseguindo fazer.

[GuttoSP 2]

Ao tentar enviar o form, vai deixar vermelha a borda do campo vazio. Basta adaptar para o que você precisa.

 

<script>	
	function confere(form) {
		var confere = 0;
		for (i = 0; i < form.elements.length; i++) {
			if (form.elements[i].type == "checkbox") {
				if (!form.elements[i].checked) {
					form.elements[i].className = "destaca";
					confere++;	
				}
				 else {
					form.elements[i].className = "normal";
				}
			} else if (form.elements[i].type == "radio") {
				if(!document.getElementById('formaPagamento').checked) {
					document.getElementById('formaPagamento').className = "destaca";
					confere++;	
				}
				 else {
					document.getElementById('formaPagamento').className = "normal";
				}
			}				
			else {
				if (form.elements[i].value == '') {
					form.elements[i].className = "destaca";
					confere++;	
				}
				 else {
					form.elements[i].className = "normal";
				}
			}
		}
		if (confere == 0) {
			return true;
		}
		else {
			return false;
		}
	}
</script>
<style type="text/css">
<!--
.normal { border: 1px solid #000000; }
.destaca { border: 1px solid #ff0000; }
-->
</style><form name="form1" method="post" action="" onSubmit="return confere(this);">
  <p>Nome 
	<input name="nome" type="text" class="normal" numbersonly id="nome">
  </p>
  <p>Email
	<input name="email" type="text" class="normal" id="email">
</p>
  <p>Telefone
	<input name="telefone" type="text" class="normal" id="telefone">
</p>
  <p>
	<select name="select" class="normal">
	  <option>Selecione</option>
	  <option value="Distrito Federal">Distrito Federal</option>
	  <option value="São Paulo">São Paulo</option>
	  <option value="Minas Gerais">Minas Gerais</option>
	  <option value="Tocantins">Tocantins</option>
	</select>
</p>
  <p>Observações<br>
	<textarea name="observacoes" class="normal" id="observacoes"></textarea>
  </p>
  <p>Nível Superior?</p>
  <p><input name="formaPagamento" id="formaPagamento" type="radio" class="normal" value="radiobutton">
  Boleto</p>
  <p>
	<input name="formaPagamento" id="formaPagamento" type="radio" class="normal" value="radiobutton"> 
	Depósito
</p>
  <p>
	<input name="concordo" type="checkbox" class="normal" id="concordo" value="checkbox">  
	Concordo com os termos </p>
  <p>
	<input name="Button" type="submit" class="normal" value="Enviar">
  </p>
</form>