[Javascript] Newbie - Making a Inline validation using js DOM and CSS

[MEM]

Here I am replying to myself.

Ok. The issue number 3) is solved. It seems that, when we use return the
function returns that value (amazing my conclusions! :s)
Also, if I use "else if" that doesn’t help. 
Case it will only execute the "else if" if the first "if" doesn't apply.
(another amazing conclusion! :s)


I've change the code like the following:

function validar(nome,idade,email) {
		
		var nome = document.getElementById("nome").value;
		var idade = document.getElementById("idade").value;
		var email = document.getElementById("email").value;
		var valido=true; //this is my Boolean flag.

			if (nome == "") {
				
	
document.getElementById("erro_nome").style.display = "inline";	
				document.getElementById("nome").select();
				document.getElementById("nome").focus();
  
		  		valido=false;
						  		
  			} 
			
			
			else if(idade == "") {
				
	
document.getElementById("erro_idade").style.display = "inline;"
				document.getElementById("idade").select();
				document.getElementById("idade").focus();

				
		  		valido=false;				
			}
		
			
			else if(email == "") {
			
	
document.getElementById("erro_email").style.display = "inline;"
				document.getElementById("email").select();
				document.getElementById("email").focus();
				
		  		valido=false;			}
		
			
		return valido;
			
	
	}

Now the issue 3) is solved. I still need help on the other two.


Regards once again,
Márcio

-----Original Message-----
From: MEM [mailto:talofo at gmail.com] 
Sent: quarta-feira, 11 de Março de 2009 14:57
To: 'JavaScript List'
Subject: Newbie - Making a Inline validation using js DOM and CSS

Hi all,

Ok. I have a CSS class to hide divs with the 'display' property.

The point is: 
when the user changes the focus, it displays the "error_div" OF THAT
ASSOCIATED FIELD.

I have several problems that I can't see to find a solution:
1) Does not work with IE ! (onsumbit seams having no effect on IE, since no
matter if the onsubmit is true or false, the form gets submitted!) What may
be the problem?

2) When the onblur() function is executed the function returns the error
message, if a field is empty. Good. But it doesn't make the relation between
the onblur() of a specific textfield, and that textfield error div message. 
I mean: If we don't type the "name" and the "age" field for example, and you
click with your mouse over the age field and then, without write anything
inside, you take your mouse away, you will not receive the error: "please
insert your age" but, instead, you will receive "please insert your name",
only because the name comes first. 

3) When the user touches submit, it shows only one error message at the
time. To see the next error, the user needs to hit submit again. What is the
technique to search, for displaying all errors at once?


I understand that my error is not really related with javascript, is more
related with newbie programming incapacities. But can I please have a light
about how to solve this issues?

Here is the code:


&&& THE FUNCTION

function validar(nome,idade,email) {
		
		var nome = document.getElementById("nome").value;
		var idade = document.getElementById("idade").value;
		var email = document.getElementById("email").value;
		
			if (nome == "") {
				
	
document.getElementById("erro_nome").style.display = "inline";	
				document.getElementById("nome").select();
				document.getElementById("nome").focus();
  
		  		return false; 
						  		
  			} 
			
			
			else if(idade == "") {
				
	
document.getElementById("erro_idade").style.display = "inline;"
				document.getElementById("idade").select();
				document.getElementById("idade").focus();

				
				return false;
				
			}
		
			
			else if(email == "") {
			
	
document.getElementById("erro_email").style.display = "inline;"
				document.getElementById("email").select();
				document.getElementById("email").focus();
				
				return false;
			}
		
			
		return true;
			
	
	}
	


THE FORM:

<form action="teste_php_confirmar.php" method="post" id="inserir_dados"
name="inserir_dados" onsubmit="return validar(nome,idade,email);">

<label>Nome:
<input type="text" name="nome" id="nome" onblur="return validar(nome);"/>

<div class="erro" id="erro_nome">Campo Obrigatorio: Introduza um
nome.</div><br />
</label>
		
<label>Idade:
<input type="text" name="idade" id="idade" onblur="return validar(idade);"/>
<div class="erro" id="erro_idade">Campo Obrigatorio: Introduza a
idade.</div><br />
</label>
	
<label>Email:
<input type="text" name="email" id="email" onblur="return validar(email);"/>
<div class="erro" id="erro_email">Campo Obrigatorio: Introduza um
email.</div><br />
</label>

</form>





Regards,
Márcio