weird javascript bug

[VJ]

Hello,

I have a weird problem with my validation in my input form. Instead of generating an alert (pop-up), I want to print a warning next to each box that causes an error. Imagine it is a from with multiple inputboxes that all have a similar check.

This is a script I use to verify if an inputbox 'naam' is filled in:

function CheckNaam() {
s=form1.naam.value;
if (s=='') { 
  e_naam.innerHTML="error: this is a required field"; 
  event.returnValue=false;
}  else { 
  e_naam.innerHTML=""; 
}
}

This function is called when the form is submitted (onsubmit), but also when focus changes away from this input box (onchange):

<input type="text" name="naam" size="40" maxlength="256" value="" 
onchange="return CheckNaam()">
<div class="errormessage" id="e_naam"></div>
</td></tr>

The behaviour is what I expect:
1. When the inputbox is not filled in, and one clicks 'submit', a message is printed next to the box.
2. The message stays until this field is filled in (one can leave the inputbox).
3. If one first fills in the name, the message disappears. However, if one then goes back to the inputbox and deletes everything, the message reappears when trying to leave the box (and one can't leave the box).

OK, so this works perfectly.


Now I wanted to check an entered emailadress on validity (simplistic check: either I expect there to be a @ sign in it, or the box to be empty). And here is my code:

function CheckEmail() {
s=form1.email.value;
if ((s.length>0) && (s.indexOf("@")<1))
	      { e_email.innerHTML="E-mail incorrect, leave blank if none"; 
                  event.returnValue=false;} 
	 else { e_email.innerHTML=""; }
}

Now, the behaviour is odd...
1. when it is not filled in, there is no problem (no message, ok).
2. when it is filled in (but not a valid emailaddress), there is message upon submit (ok) and the submit fails (ok). Now the user has 2 options: either fill in a correct address or delete what is in the box; he cannot leave the box until he does one of these two.
If he fills in a correct address the message disappears when focus moves away or the form is submitted (ok). However, If he clears the box, it is possible to move focus to another box, but the message stays... Submitting the form is possible.

How come the message stays ?


As a test case, I tried an inputbox which has to be left blank (it is just a test case). It should display a message when the box contains data, but not display that warning when it is emtpy... (using the onchange event: if the warning was there, it will not change even if the box is erased and focus is moved to another window) So here lies the problem I think...

Any ideas?
Thanks!


A long post... I wonder if anyone will have bothered to read it...


Jörg

[Rob(QG)]

Try using onblur instead of onchange as the event that does the validation.

[VJ]

I'll give it a try this weekend!

(I just read up on onblur/onchange and I'm not sure what it will change... )


Jörg

[Rob(QG)]

I understand the difference between the two, and onchange is what you really would exptect to be able to use.

But it does seem to be that it is recommended to use onblur for that sort of thing. I presume that the onchange event is triggered less often than you (or I) would think.

[VJ]

Yes, the behaviour I see with the email adress seems to suggest that onchange isn't called when the box goes from filled out incorrectly to emtpy.
However, it *is* called when the 'naam' field goes from filled out to empty.

I was more thinking along the lines that I overlooked to change the return value somewhere ...

But I'll give the onblur a try this weekend!


Jörg