Page 1 of 1
focus stays when the input is invalid
Posted: Wed Feb 21, 2007 3:07 am
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.
Posted: Wed Feb 21, 2007 5:32 am
by Kieran Huggins
instead of "document.forms['myForm'].chat.focus();" try "chatInput.focus();"
Posted: Wed Feb 21, 2007 5:56 am
by ansa
No...tried:
chatInput.focus();
and
chat.focus();
both didn't work...
Maybe need a different function or approach?
Posted: Wed Feb 21, 2007 6:24 am
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

Posted: Wed Feb 21, 2007 6:47 am
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...)
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....
Posted: Wed Feb 21, 2007 7:21 am
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..
Posted: Wed Feb 21, 2007 8:19 am
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?
Posted: Wed Feb 21, 2007 8:20 am
by feyd
The comparison may be failing.
Posted: Wed Feb 21, 2007 8:45 am
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.
Posted: Wed Feb 21, 2007 9:06 am
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.
Posted: Wed Feb 21, 2007 9:46 am
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.
Thanks for all your response!