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

Wed Mar 11 11:21:03 CDT 2009

Thanks a lot,

Before actually read your reply, I have done the following code:

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; 

			if (nome == "") {

document.getElementById("erro_nome").style.display = "inline";
				document.getElementById("nome").select();
				document.getElementById("nome").focus();

				valido = false;

			} else {

document.getElementById("erro_nome").style.display = "none;"

				}

			if (idade == "") {

document.getElementById("erro_idade").style.display = "inline;"
				document.getElementById("idade").select(); 
				document.getElementById("idade").focus();

				valido = false;

			} else {

document.getElementById("erro_idade").style.display = "none;"

				}

			if(email == "") {

document.getElementById("erro_email").style.display = "inline;"
				document.getElementById("email").select(); 
				document.getElementById("email").focus();

				valido = false;

			} else {

document.getElementById("erro_email").style.display = "none;"

				}

		return valido;

	}

But I get a loop when it happens. And I'm getting the browser to stop
responding. (yupi, I can create virus! Even if I can't validate a form!).

The weird about this is that, if I remove the email part of the code, and I
stay with only two fields, he validates as expected in Aptana (the IDE I'm
using) internal firefox browser). But it does not behave properly on browser
direct testing. Why I'm I getting this cross-same browser inconsistencies? 

Before, I go to your code, I'd like to stay with mine, since, and even if
it's less elegant, newbie etc... I'm starting to learn what I do where
according to this trial / error method. ;)

Can I please have some feedback again about, Why I'm I getting a loop.

The links are here:
This one is the "virus" one. He don't stop the loop. And the Firefox seams
to hang up.
http://ludmila.uuuq.com/teste_php_pagina_v4.html

The two fields form that work in Aptana internal firefox browser but not on
a real browser test, is here:
http://ludmila.uuuq.com/teste_php_pagina_v5.html

Regards once again,
Márcio

PS TO ALL: If you believe that this cannot be accomplish, by any means,
using something similar to this code, please, let me know so I can adopt
Nick code and start understanding what it does.

-----Original Message-----
From: javascript-bounces at lists.evolt.org
[mailto:javascript-bounces at lists.evolt.org] On Behalf Of Nick Fitzsimons
Sent: quarta-feira, 11 de Março de 2009 15:32
To: JavaScript List
Subject: Re: [Javascript] Newbie - Making a Inline validation using js DOM
and CSS

Hi,

In your error function you are returning false when a field is empty;
therefore, if the name field is blank, it returns false and never goes on
to check the other fields.

Try breaking it apart into smaller functions to see the flow more clearly;
try this:

function validateField(fieldId, errorId) {
    var field = document.getElementById(fieldId);
    var value =  field.value;
    if (value == "") {
        document.getElementById("errorId").style.display = "inline";
        field.focus();
        return false;
    } else {
        document.getElementById("errorId").style.display = "none";
        return true;
    }
}

function validar() {
    return validateField("nome", "erro_nome")
    && validateField("idade", "erro_idade")
    && validateField("email", "erro_email");
}

Then change your field HTML to just check the field that's blurring:
<input type="text" name="nome" id="nome" onblur="return
validateField(nome);"/>

(...do the same for the other two fields).

There are a few other things you will probably have to do to get the code
working reliably (for example, if somebody just types a space the check
for "" will fail - Google for "javascript trim" to see how to deal with
this) but the above should get you started.

(Note: I haven't tested the above, so keep an eye out for any typing
mistakes I've made :-)

Regards,

Nick.

On Wed, March 11, 2009 2:57 pm, MEM wrote:
> 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
>
> _______________________________________________
> Javascript mailing list
> Javascript at lists.evolt.org
> http://lists.evolt.org/mailman/listinfo/javascript
>

-- 
Nick Fitzsimons
http://www.nickfitz.co.uk/

_______________________________________________
Javascript mailing list
Javascript at lists.evolt.org
http://lists.evolt.org/mailman/listinfo/javascript