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

MEM talofo at gmail.com
Wed Mar 11 09:57:24 CDT 2009


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




More information about the Javascript mailing list