Validação de campo do formulário

[André Severino 3]

Boa tarde pessoal, seguinte eu criei uma função apenas para verificar se o campo está preenchido ou vazio.

Agora eu queria alterar a classe deste campo com essa mesma verificação, alguém sabe como ? Apenas alterar a cor do campo. por exemplo: de white, para red.

 

Abaixo o código

 

java.js

function enviardados(){
if(document.formres.txtNome.value==""){
alert("O campo NOME é obrigatório!");
document.formres.txtNome.focus();
return false; 
}
return true;
}

form.html

<input name="txtNome" type="text" id="txtNome" onblur="return enviardados();" title="Nome completo. Exemplo: Fabiano Carlos Cunha" />

Detalhe: o nome do formulário é formres.

[William Bruno 1501]

use getElementById()... e não a forma form.campo

function enviardados(){
	var txtNome = document.getElementById('txtNome');
	if( txtNome.value=='' )
	{
		alert('O campo NOME é obrigatório!');
		txtNome.focus();
		txtNome.className = 'red';
		return false; 
	}
	return true;
}

indente melhor/corretamente teus códigos.

[André Severino 3]

Valeu William, seguinte... como assim indente? Você fala inserir tudo no code ou postar o código html inteiro ??

[augustoclaro 2]

identação é colocar espaços no código para melhorar o entendimento, por exemplo:

 

<table>
<tr>
<td>OI</td>
</tr>
</table>

vira:

 

<table>
    <tr>
       <td>OI</td>
    </tr>
</table>

[André Severino 3]

Valeu pessoal, era isso a minha dúvida, mas só que não está dando certo, pois eu tenho 10 campos no formulário e usei este exemplo e validei os 10. Quando eu passo o mouse no botão submit ele começa a verificação. O que acontece. ele começa a validar um campo de cada vez, por ex.: o campo nome está vazio ele exibe o alerta, se o campo nome estiver correto ele exibe o alerta do campo data e assim sucessivamente.

 

Só que quando eu coloco o comando

txtNome.className = 'red';

nos atributos das funções ele muda apenas a classe do campo nome.

 

Detalhes: Eu criei a classe no css, e coloquei apenas o atributo. background-color:red;

 

Alguém sabe porque acontece isso ?

 

Abaixo o código dos 3 primeiros campos.

function enviardados(){
	var txtNome 	= document.getElementById('txtNome');
	var txtDataNasc = document.getElementById('txtDataNasc1');
	var txtNomePai 	= document.getElementById('txtNomePai');
	var txtNomeMae 	= document.getElementById('txtNomeMae');
if(txtNome.value==""){
	alert("O campo NOME é obrigatório!");
	txtNome.focus();
	txtNome.className = 'nok';
	return false; 
}
if(txtDataNasc.value==""){
	alert("O campo Data de Nascimento é obrigatório! Formato: dd/mm/aaaa");
	txtDataNasc.focus();
	txtDataNasc.className = 'nok';
	return false; 
}
if(txtNomePai.value==""){
	alert("O campo NOME DO PAI é obrigatório!");
	txtNomePai.focus();
	txtNomePai.className = 'nok';
	return false; 
}
if(txtNomeMae.value==""){
	alert("O campo NOME DA MÃE é obrigatório!");
	txtNomeMae.focus();
	txtNomeMae.className = 'nok';
	return false; 
} return true };

[augustoclaro 2]

Olá.

 

Tente assim:

 

function enviardados(){
var campos = new Array();
campos[0] = "txtNome";
campos[1] = "txtDataNasc1";
campos[2] = "txtNomePai";
campos[3] = "txtNomeMae";
var enviar = true;
for (i=0;i<=campos.length-1;i++){
if (document.getElementById(campos[i]).value==""){
document.getElementById(campos[i]).className='nok';
enviar = false;
}
}
if (!enviar){
alert("Preencha todos os campos.");
return false;
}else{
return true;
}};

A diferença é que vai exibir uma mensagem única para todos os campos.

[William Bruno 1501]

Só que quando eu coloco o comando

txtNome.className = 'red';

nos atributos das funções ele muda apenas a classe do campo nome.

 

por causa do return, ele ta validando uma de cada vez... logo so coloca a class em um de cada vez..

 

crie uma flag, e so faça o return no final

[André Severino 3]

Valeu pessoal, vou fazer o teste e amanhã eu falo como foi.

abraços e até +