Mudar cor da borda de input nos campos com erro

[Hebe 0]

Boa noite pessoal,

Estou muito precisando de uma ajuda de voces... eu tenho um javascript para um pequeno formulario e tenho que fazer umas modificacoes... o codigo que deve ser modificado esta abaixo:

<script type="text/javascript">ponto1=0;ponto2=0;ponto3=0;ponto4=0;function che(fnm){rro="";d=document.forms[fnm];if(d.ami.value=="Nome"){rro+="		   O campo Nome do destinatário não foi preenchido\n";}if(d.igo.value=="E-mail"){rro+="		   O campo E-mail do destinatário não foi preenchido\n";}if(d.eu.value=="Nome"){rro+="		   O campo Nome do rementente não foi preenchido\n";}if(d.eue.value=="E-mail"){rro+="		   O campo E-mail não do rementente foi preenchido\n";}if(rro!=""){msg="A oportunidade não pode ser enviada porque algum erro foi encontrado.\n";msg+="Preencha o(s) campo(s) solicitado(s) e tente novamente:\n\n";alert(msg+rro);return false;}if(/^([\w\.\-])+\@(([\w\-])+\.)+([\w ]{2,4})$/.test(document.frm.igo.value)==false){alert("O E-mail do destinatário é inválido!");return false;}if(/^([\w\.\-])+\@(([\w\-])+\.)+([\w ]{2,4})$/.test(document.frm.eue.value)==false){alert("O E-mail do rementente é inválido!");return false;}return true;}</script>

<form name="frm"method="post"onsubmit="return che(this.name)">
<input type="text"name="ami"class="campo"value="Nome"onfocus="if(ponto4==0){this.value='';ponto4=1}"onblur="if(!this.value){this.value='Nome';ponto4=0}">
<input type="text"name="igo"class="campo"value="E-mail"onfocus="if(ponto1==0){this.value='';ponto1=1}"onblur="if(!this.value){this.value='E-mail';ponto1=0}">
<input type="text"name="eu"class="campo"value="Nome"onfocus="if(ponto2==0){this.value='';ponto2=1}"onblur="if(!this.value){this.value='Nome';ponto2=0}">
<input type="text"name="eue"class="campo"value="E-mail"onfocus="if(ponto3==0){this.value='';ponto3=1}"onblur="if(!this.value){this.value='E-mail';ponto3=0}">
<input type="submit"value="Enviar"class="but">
</form>

No momento o codigo apresenta uma janela para os erros que sao: campos em branco e e-mails incorretos... ok... agora vai as mudansas... nao quero que aparesa uma janela de aviso, em ves disso, quero que os campos que estejam errados fiquem com a borda em vermelho e que dentro dele aparesa uma mensagem, tipo erro... tenho pesquisado um pouco na net e em algunsoutros istemas que ncontro pelo caminho mas esta dificil fazer... Obrigada http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[klaygomes 0]

Hebe, cria duas classes CSS na página, uma para os campos no estado normal e outra no estado de erro (com a borda vermelha)

 

Depois qeu você tive feito isso, procure no seu script pelos alerts de msg de erro e substituia por d.NOMEDOCAMPOQUETACOMERRO.className = "classe css para input com erro"

[Hebe 0]

Oi Klaygomes você ajudou bastante... obrigada... mas quando tentei retirar a mensagem de alert nao funciona... estou querendo que apenas mude de cor os campo, sem a mensagem de aviso...

<script type="text/javascript">function che(fnm){rro="";d=document.forms[fnm];if(d.nomeDestinatario.className="but".value=="Nome")if(d.emailDestinatario.className="but".value=="E-mail")if(d.nomeRemetente.className="but".value=="Nome")if(d.emailRemetente.className="but".value=="E-mail")if(rro!=""){alert(rro);return false;};return false;}return true;}</script>

[fercosmig 0]

olá Hebe não testei o código ae mas acredito que não vai dar problemas

 

<script type="text/javascript">
ponto1=0;
ponto2=0;
ponto3=0;
ponto4=0;
function che(fnm){
	rro="";
	campos = '';
	d=document.forms[fnm];
	if(d.ami.value=="Nome"){
		rro+="O campo Nome do destinatário não foi preenchido\n";
		campos += 'ami';
	}
	if(d.igo.value=="E-mail"){
		rro+="O campo E-mail do destinatário não foi preenchido\n";
		if (campos <> '') campos += ',';
		campos += 'igo';
	}
	if(d.eu.value=="Nome"){
		rro+="O campo Nome do rementente não foi preenchido\n";
		if (campos <> '') campos += ',';
		campos += 'eu';
	}
	if(d.eue.value=="E-mail"){
		rro+="O campo E-mail não do rementente foi preenchido\n";
		if (campos <> '') campos += ',';
		campos += 'eue';
	}
	if(rro!=""){
		msg="A oportunidade não pode ser enviada porque algum erro foi encontrado.\n";
		msg+="Preencha o(s) campo(s) solicitado(s) e tente novamente:\n\n";
		alert(msg+rro);
		campo = campos.split(',');
		for (i = 0; i < campo.length; i++){
			document.getElementById(campo[i]).className = 'campo_erro';
		}
		return false;
	}
	if(/^([\w\.\-])+\@(([\w\-])+\.)+([\w ]{2,4})$/.test(document.frm.igo.value)==false){
		alert("O E-mail do destinatário é inválido!");
		return false;
	}
	if(/^([\w\.\-])+\@(([\w\-])+\.)+([\w ]{2,4})$/.test(document.frm.eue.value)==false){
		alert("O E-mail do rementente é inválido!");
		return false;
	}
	return true;
}
</script>

<form name="frm"method="post"onsubmit="return che(this.name)">
<input type="text" name="ami" id="ami" class="campo"value="Nome"onfocus="if(ponto4==0){this.value='';ponto4=1}"onblur="if(!this.value){this.value='Nome';ponto4=0}">
<input type="text" name="igo" id="igo" class="campo"value="E-mail"onfocus="if(ponto1==0){this.value='';ponto1=1}"onblur="if(!this.value){this.value='E-mail';ponto1=0}">
<input type="text" name="eu" id="eu" class="campo"value="Nome"onfocus="if(ponto2==0){this.value='';ponto2=1}"onblur="if(!this.value){this.value='Nome';ponto2=0}">
<input type="text" name="eue" id="eue" class="campo"value="E-mail"onfocus="if(ponto3==0){this.value='';ponto3=1}"onblur="if(!this.value){this.value='E-mail';ponto3=0}">
<input type="submit" value="Enviar" class="but">
</form>

[Hebe 0]

Poxa obrigada fercosmig deve ter tido um trabalho para arrumar isso, agradeso de corasao... fico ate com vergonha de dizer que nao era isso que estou tentanto fazer... o que quero mesmo e retirar as mensagem de erro, os alert e apenas manter as mudansas de cores dos inputs... eu fiz isso mas nao esta funcionando

<script type="text/javascript">function che(fnm){rro="";d=document.forms[fnm];
if(d.nomeDestinatario.className="but".value=="Nome")
if(d.emailDestinatario.className="but".value=="E-mail")
if(d.nomeRemetente.className="but".value=="Nome")
if(d.emailRemetente.className="but".value=="E-mail")
if(rro!=""){return false;};return false;}return true;}</script>

[fercosmig 0]

No seu código tem 3 alerts

 

comenta os que você não quizer...

 

os 3 alerts:

alert(msg+rro);

alert("O E-mail do rementente é inválido!");

alert("O E-mail do rementente é inválido!");

você pode comentar a linha do alert

exemplo:

//alert(msg+rro);

se você comentar o alert que eu coloquei no exemplo, somente os campos serão alterados... testa ae