focus stays when the input is invalid

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
ansa
Forum Commoner
Posts: 31
Joined: Tue Aug 29, 2006 1:58 am
Location: Hamburg, Germany

focus stays when the input is invalid

Post by ansa »

I think this is a common situation, and I already googled several javascript tutorials. They all mention quite the same technique, but it doesn't work for me.

Everytime a user leaves an input, I want to check its validity before he jumps to another input box. When the input is invalid, I want the focus stays on this input box. Here is my javascript:

Code: Select all

function checkChat(chatInput)  {
  if (chatInput < 0 || chatInput > 1) {
    alert("input invalid");
    document.forms['myForm'].chat.focus();
  }
}
called from HTML form myForm:

Code: Select all

<input type="text" name="chat" onblur="checkChat(this.value)" size="1" value="<? echo $value[3]; ?>">
That is the standard technique from those tutorials, but in my case, the focus always jumps to the next input box whatever the value is. If this topic already has been discussed before, please point me to it. Thanks.
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post by Kieran Huggins »

instead of "document.forms['myForm'].chat.focus();" try "chatInput.focus();"
ansa
Forum Commoner
Posts: 31
Joined: Tue Aug 29, 2006 1:58 am
Location: Hamburg, Germany

Post by ansa »

No...tried:

chatInput.focus();

and

chat.focus();

both didn't work...

Maybe need a different function or approach?
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post by Kieran Huggins »

Looks like I wasn't paying close enough attention:

Code: Select all

function checkChat(chatInput)  {
  if (chatInput.value < 0 || chatInput.value > 1) {
    alert("input invalid");
    chatInput.focus();
  }
} 

Code: Select all

<input type="text" name="chat" onblur="checkChat(this)" size="1" />
The difference is this: you're passing the whole object to the function instead of it's value. That way it's easier refer to the object when you want to specify focus.

All that being solved now, it is a very annoying way to validate input ;-)
ansa
Forum Commoner
Posts: 31
Joined: Tue Aug 29, 2006 1:58 am
Location: Hamburg, Germany

Post by ansa »

I have followed your suggestion, but unfortunately the focus still goes to the next input box (I hit tab after inserting the value, like most people do...)

:cry:
it is a very annoying way to validate input
What would be a better approach to validate input, then? I know I can use PHP but it could use up server memory and stuff like that....
User avatar
CoderGoblin
DevNet Resident
Posts: 1425
Joined: Tue Mar 16, 2004 10:03 am
Location: Aachen, Germany

Post by CoderGoblin »

Can you return false on onblur.. I cannot remember. I know that when using onclick returning false effectively cancels the click.

Personally when checking things like this, I find alerts are really annoying (requiring the user to perform an extra click). Far better is to add some text next to the field saying "ERROR: valid format is..." possibly in red.

Something else to remember is that, even if you check validation with javascript, you should still also check it on the server (using php ?). You can easily hack values validated only in javascript (or simply switch javascript off) and possibly lay yourself open to things like SQL Injection..
ansa
Forum Commoner
Posts: 31
Joined: Tue Aug 29, 2006 1:58 am
Location: Hamburg, Germany

Post by ansa »

I have thought about it too, putting an error message next to the input instead of alert. But then I ran into another problem:

how to get the return value from a javascript to be used in PHP? Let's say my function returns "wrong". In PHP, if "wrong" then print the error message.

Or perhaps you have a solution?
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

The comparison may be failing.
User avatar
CoderGoblin
DevNet Resident
Posts: 1425
Joined: Tue Mar 16, 2004 10:03 am
Location: Aachen, Germany

Post by CoderGoblin »

The normal method I use with web development is...

Step 1 : Design everything with HTML and PHP. Get that working.
Step 2: Enhance the site with javascript adding AJAX processing or in your case form validation.

Javascript has no relation to the PHP. If you have Javascript validation, Javascript should be used to insert the additional text. The Javascript should add the same error messages as the PHP validation, but you have to code it separately in javascript*. All PHP deals with though are the HTML form elements as $_POST or $_GET values.

Regards
CoderGoblin

* If you want to get complicated you could potentially use AJAX to use the same validation process and messages but that is probably too complex here.
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post by Kieran Huggins »

doesn't seem to work in FF - works in IE - I imagine it has to do with security and not letting scripts hijack the UI too much.

I would use something like css styling + form submit disabling to ensure valid inputs on the client side.

Hockey had a thread on this in which I posted an example a day or two ago.
ansa
Forum Commoner
Posts: 31
Joined: Tue Aug 29, 2006 1:58 am
Location: Hamburg, Germany

Post by ansa »

I do check these inputs with PHP, I just wanted the user sees the error message (if any) right after he entered the value, before submitting. Yes, it is an enhancement from what I have done.

So, I think for now I will just leave it as it is (with PHP), until I master AJAX. :D

Thanks for all your response!
Post Reply