[Javascript] Making a Inline validation using js DOM and CSS part II

[MEM]

Thanks a lot for your time Troy. 
The function as you have think works very well onblur. Perfectly. :) 

Sure that, in the future, I want to allow the function to validate the
e-mail field, the field.length (maybe instead of having =""), and doing all
this in a Reusable Way. Also allow the validation of checkboxes, dropdown,
etc... only by calling the function onblur and onsumbit.
I will think about that and I will post my progresses.



But, a problem that this function have is that, without doing any typing on
the textboxes, and then, hiting the submit button, it does not show all
error messages. It shows only the first one.

So the workaround I've found (on a forum) was to call the function twice.


So I have this one:

<script type="text/javascript" language="JavaScript"> 
   
		
			function validar(campoId, erroId) {
				var campo =
document.getElementById(campoId);
				var valor =  campo.value;
      
				if (valor == "") {
	
document.getElementById(erroId).style.display = "inline";
			        campo.focus();
			
					return false;
    
				} else {
        
 
document.getElementById(erroId).style.display = "none";
           
					return true;
    				}
			}


And then I have this:

			function validarSubmit() { //não sei porquê mas, se
correr a função duas vezes, funciona! :s MAS PORQUÊ?!!
				validar("nome", "erro_nome");
				validar("idade", "erro_idade");
				validar("email", "erro_email");
	
				return (validar("nome", "erro_nome")  &&
validar("idade", "erro_idade") && validar("email", "erro_email"));
			}


But I don't understand why this shows all messages when I use this. :s Why
do I need to call the function validar and then, make the return again on
the same function with the same attributes, to allow all validation error
messages to appear, when we hit the submit button without filling in any
text-field. 




I will look closely to your last e-mail tomorrow. 

Thanks a lot, really. :)


Regards,
Márcio





-----Original Message-----
From: javascript-bounces at lists.evolt.org
[mailto:javascript-bounces at lists.evolt.org] On Behalf Of Troy III Ajnej
Sent: domingo, 15 de Março de 2009 15:38
To: javascript at lists.evolt.org
Subject: Re: [Javascript] Making a Inline validation using js DOM and CSS
part II


Hi Márcio.

I've just tested it and it works as intended.

I've removed your intermediate function function call, since it doesn't

work that way.

 

It is better to supply your function arguments with the needed IDs

of your elements directly from the event function call where you can

see them.

...

 <label>Idade:
 <input type="text" name="idade" id="idade" onblur="validar('idade',
'erro_idade');" />
 <div class="erro" id="erro_idade">Campo Obrigatorio: Introduza a
idade.</div><br />
 </label>

...

 

So you can move your compacted script away from the page,

 

<!--
 function validar(fieldId, errorId) {
   fieldId = document.getElementById(fieldId);
   errorId = document.getElementById(errorId);
  if (fieldId.value == "") {
   errorId.style.display = "inline" }
  else { errorId.style.display = "none"   }
 }
-->

and still preserve a higher level of its readability. 

 

But you'll be needing more code and another (better if) separated 

function for it to become an inteligent form validation function.

 

Regards
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
                                      Troy III
                         progressive art enterprise
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 
> From: talofo at gmail.com
> To: javascript at lists.evolt.org
> Date: Fri, 13 Mar 2009 23:27:34 +0000
> Subject: Re: [Javascript] Making a Inline validation using js DOM and CSS
part II
> 
> Thanks. I was really stuck on this. I will test this tomorrow and post
back
> the progress and the doubts.
> 
> Thanks a lot,
> Regards,
> Márcio
> 


_________________________________________________________________
Windows Live™ Groups: Create an online spot for your favorite groups to
meet.
http://windowslive.com/online/groups?ocid=TXT_TAGLM_WL_groups_032009
_______________________________________________
Javascript mailing list
Javascript at lists.evolt.org
http://lists.evolt.org/mailman/listinfo/javascript