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

Fri Mar 13 17:33:50 CDT 2009

To cut the story short, try this new approach:

<input type="text" name="nome" id="nome" onblur="validar('nome', 'erro_nome')" />

<div class="erro" id="erro_nome">Campo ...

.

.

.

<script type="text/javascript" language="JavaScript"> 

function validar(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;
    }
}

</script>

Will work! 

Regards,
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
                                      Troy III
                         progressive art enterprise
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

> From: talofo at gmail.com
> To: javascript at lists.evolt.org
> Date: Fri, 13 Mar 2009 02:01:15 +0000
> Subject: Re: [Javascript] Making a Inline validation using js DOM and CSS part II
> 
> Hi,
> 
> Well, I have made that comment because in IE (with field.focus active) the
> user cannot choose other field. But if you have (as It's intended) more than
> one error message displayed at once, it will be nice to let the user choose
> what he/she wants to correct first. That's why I've commented that line.
> So I believe that this may not be an issue...
> 
> Thanks,
> 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: sexta-feira, 13 de Março de 2009 01:10
> To: javascript at lists.evolt.org
> Subject: Re: [Javascript] Making a Inline validation using js DOM and CSS
> part II
> 
> 
> 
> Hello,
> 
> 
> 
> how about removing script comments from the line 33,
> 
> that is:
> 
> //field.focus();
> 
> first? 
> 
> 
> 
> ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
> Troy III
> progressive art enterprise
> ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
> 
> 
> 
> 
> 
> > From: talofo at gmail.com
> > To: javascript at lists.evolt.org
> > Date: Thu, 12 Mar 2009 18:28:44 +0000
> > Subject: Re: [Javascript] Making a Inline validation using js DOM and CSS
> part II
> > 
> > 
> > "You are telling IE that the following script is:
> > <script type="application/javascript" language="JavaScript">
> > an Application!"
> > 
> > 
> > AHHHH!!!!!!!!! (screaming with newbie pain!!!)
> > 
> > "... you are vriting the function "validar" twice(!)"
> > 
> > Yes this one was detected, at least. 
> > 
> > 
> > 
> > Ok. Here is the new version:
> > http://localhost/teste/teste/teste_php_pagina_v7.html
> > 
> > 
> > And I have made the following tests:
> > 
> > #### QUESTION 1
> > #####################################################################
> > 
> > TEST ONE:
> > 1) Write something in all form text fields (Nome, Idade, Email).
> > 2) Now start deleting what you have written, field by field, and you will
> > notice some odd things.
> > 3) repeat the process starting the deleting from another field.
> > 
> > What is happening? 
> > If we start removing what we have introduced from "bottom to top", so, we
> > start deleting the data on the "Email" field, that we delete the "Idade"
> > field and at last the "Nome" field, we will see that ALL ERROR messages
> > appear. Good.
> > 
> > However:
> > If we start deleting the text on the textboxes starting on "Nome" then
> ONLY
> > nome error message will appear.
> > 
> > If we start deleting the text on the textboxes starting in the middle, on
> > the "Idade" field, then, we will have another error message IF we delete
> the
> > contents of the "Nome" textfield. But we get no new error message if we
> > delete the contents of the "Email" field.
> > 
> > I have absolutely no clue about why is this behaving like this. :(
> > 
> > 
> > 
> > #### QUESTION 2
> > #####################################################################
> > TEST TWO: (that probably is related with test one):
> > If we don't fill anything on the fields and then we click on the submit
> > button.
> > 
> > Issue:
> > We will not get three error messages, but only one. The first one. 
> > I think I know why this is happening. I believe this is happening because
> > the "function validateField that is called by function validar() onSubmit,
> > behaves like this:
> > 
> > If the value of the first field called on the validar() function is empty,
> > then,
> > the function validateField will return false; Then, the function stops,
> and
> > it will not 
> > execute on the other fields.
> > 
> > I believe I need some kind of loop over the form fields that are being
> > validated.
> > Telling something like: 
> > For all form fields that I want to validate,
> > If value =="" then displayerrormessageflag=1
> > End of the cicle.
> > If displayerrormessageflag=1
> > Then
> > Return false;
> > 
> > (I hope that, with this, I can get the return false; only when the loop
> > stops).
> > 
> > Is with something like this that we can solve this kind of issues?
> > 
> > 
> > #### QUESTION 3
> > #####################################################################
> > In function validateField 
> > 
> > What does this line mean? 
> > var value = field.value;
> > 
> > Is the value declared as a variable the same thing as the value that
> appears
> > after the field. ? Because it seems to me that is not the same. It seems
> to
> > me that what we are telling in this line is:
> > 
> > In the variable value hold the value of the variable field. So it seems
> that
> > we have to assumptions of value in the same line, despite the fact that
> they
> > share the same name.
> > 
> > Is this true?
> > 
> > 
> > 
> > Thanks a lot. It's absolutely unfair to teach nothing on a mailing list,
> and
> > only learn. 
> > I realize that. And I excuse myself for that. I can't avoid it however,
> > since that is part of being a newbie. :( But I promise to read and
> > investigate a lot.
> > 
> > Thanks once again, 
> > 
> > Regards,
> > Márcio
> > 
> > 
> > 
> > 
> > 
> > 
> > 
> > 
> > 
> > 
> > Behalf Of Troy III Ajnej:
> > 
> > The problem is:
> > 
> > You are telling IE that the following script is:
> > <script type="application/javascript" language="JavaScript">
> > an Application! 
> > 
> > 
> > 
> > IE is holding your word on it!...
> > 
> > 
> > 
> > You can simply declare it as <script> and let IE recognize and 
> > 
> > decide how to interpret it. Or you give it the correct description:
> > 
> > 
> > 
> > <script type="text/javascript" language="JavaScript">
> > 
> > 
> > than it will work.
> > 
> > 
> > 
> > And
> > 
> > ... you are vriting the function "validar" twice(!) Well, it doesn't cause
> > 
> > any problems - but doesn't help either. :)
> > 
> > 
> > 
> > Cheers.
> > 
> > 
> > 
> > ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
> > Troy III
> > progressive art enterprise
> > ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
> > 
> > 
> > 
> > 
> > 
> > > From: talofo at gmail.com
> > > To: javascript at lists.evolt.org
> > > Date: Thu, 12 Mar 2009 14:49:07 +0000
> > > Subject: [Javascript] Making a Inline validation using js DOM and CSS
> part
> > II
> > > 
> > > Ok. I've taken Nicks code. 
> > > I think it's very nice because it allows us to create a general
> function,
> > > and then, using another function to call that first function with some
> > > params. This method of organizing things, allow us
> > > to ON upgrading validateField function, to upgrade automatically all
> > > validations that we may have made with functionvalidar();
> > > 
> > > But I have several issues:
> > > 
> > > 1)
> > > This works more or less on Firefox (the last field (email), does not
> > ALWAYS
> > > show the error message when it should. But I believe he has the same
> code
> > as
> > > the other two. Why is this working with only two fields and not with
> > three?
> > > 
> > > 2)
> > > In IE, I get an error when calling the onblur(), it says Error: Object
> > > Expected, here:
> > > 
> > > <input type="text" name="nome" id="nome" onblur="return
> validar(nome);"/>
> > > <input type="text" name="idade" id="idade" onblur="return
> > validar(idade);"/>
> > > 
> > > and here,
> > > 
> > > <input type="text" name="email" id="email" onblur="return
> > validar(email);"/>
> > > 
> > > 
> > > Please take a look here:
> > > http://ludmila.uuuq.com/teste_php_pagina_v6.html
> > > 
> > > 
> > > Any clues about how to solve this issues?
> > > 
> > > 
> > > Please help,
> > > Regards,
> > > Márcio
> > > 
> > > 
> > > Ps- About the link: the server is a temp one, sometimes you may get a
> 404
> > > error, but it's a temporary issue. The file is there. 
> > > 
> > > _______________________________________________
> > > Javascript mailing list
> > > Javascript at lists.evolt.org
> > > http://lists.evolt.org/mailman/listinfo/javascript
> > 
> > _________________________________________________________________
> > Hotmail® is up to 70% faster. Now good news travels really fast. 
> > http://windowslive.com/online/hotmail?ocid=TXT_TAGLM_WL_HM_70faster_032009
> > _______________________________________________
> > Javascript mailing list
> > Javascript at lists.evolt.org
> > http://lists.evolt.org/mailman/listinfo/javascript
> > 
> > _______________________________________________
> > Javascript mailing list
> > Javascript at lists.evolt.org
> > http://lists.evolt.org/mailman/listinfo/javascript
> 
> _________________________________________________________________
> 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
> 
> _______________________________________________
> Javascript mailing list
> Javascript at lists.evolt.org
> http://lists.evolt.org/mailman/listinfo/javascript

_________________________________________________________________
Hotmail® is up to 70% faster. Now good news travels really fast. 
http://windowslive.com/online/hotmail?ocid=TXT_TAGLM_WL_HM_70faster_032009