Form Field validation - retain focus

I'm looking for any way to keep the user in a form field after validating it. I'm using the mootools javascript framwork (ver1.2) but a straight javascript solution would be fine.

In in example if the user types "stop" in the first field then it should display alert and put the focus back in the first field. It seems to me that the code below should work fine. But it only works as I would expect in IE. Testing this page in 4 different browser I get 4 different behaviors:

Fireox 3.03: Alert displays but user continues on to next field when tabbing or clicking out
IE 7: Works as expected
safari 3.1.2: First field remains highlighted when user types "stop" but cursor moves to next field
Chrome: Works as expected but the alert is displayed twice
<html>
<head>
<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
        $('myDate1').addEvent('blur', function(e) {
                if ($('myDate1').get('value') == 'stop'){
                        e.stop();
                        alert('You have typed \'stop\'. stay in this field until you type somthing else.');
                        $('myDate1').focus();
                }
        });
});
</script>
</head>
 
<body>
<form>
myDate1 <input id="myDate1" type="text"  name="myDate1" value="" /><br />
myDate2 <input id="myDate2" type="text"  name="myDate2" value="" /><br />
myDate3 <input id="myDate3" type="text"  name="myDate3" value="" /><br />
myDate4 <input id="myDate4" type="text"  name="myDate4" value="" /><br />
</form>
</body>
</html>

Open in new window

blotsAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Tomarse111Commented:
You;ll need to change the window.addEvent('domready', function()  to window.addEvent('load', function() for this to work in firefox.

http://groups.google.com/group/mootools-users/browse_thread/thread/31bfc8e532672519
0
Tomarse111Commented:
that was actually the wrong link I posted, but it also does point out you need to change it to document.addEvent, so try that with domready first then try it with load.

:)
0
Michel PlungjanIT ExpertCommented:
That is how the browsers work.

You blur the field which tries to focus the next field, but you grab the focus with the alert which then blurs the field.

Use setTimeout in the blur for the focus.

In straight js:


<script>
var field2focus = null;
var tId = "";
function validate(theField) {
  if (theField.value=="") {
    field2focus=theField;
    alert('Please enter a value')
    tId=setTimeout('focusIt()',10);
  }
  field2focus=null;
}
 
function focusIt() {
  clearTimeout(tId);
  if (field2focus) field2focus.focus();
}
</script>
 
<input name="x" type="text" value="" onBlur="validate(this)">
<input name="y" type="text" value="" onBlur="validate(this)">

Open in new window

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

hieloCommented:
using onchange seems more appropriate.
<html>
<head>
<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
        $('myDate1').addEvent('change', function(e) {
                if ($('myDate1').get('value') == 'stop'){
                        e.stop();
                        alert('You have typed \'stop\'. stay in this field until you type somthing else.');
                        $('myDate1').focus();
				    setTimeout("focusIt('myDate1')",100);
                }
        });
}); 
function focusIt(str)
{
	document.getElementById('str').focus();
}
</script>
</head>
 
<body>
<form>
myDate1 <input id="myDate1" type="text"  name="myDate1" value="" /> 
myDate2 <input id="myDate2" type="text"  name="myDate2" value="" /> 
myDate3 <input id="myDate3" type="text"  name="myDate3" value="" /> 
myDate4 <input id="myDate4" type="text"  name="myDate4" value="" /> 
</form>
</body>
</html>

Open in new window

0
blotsAuthor Commented:
Thank you for your replies. I can not get any of the example submitted to work.

Tomarse111 -  changing "domready" to "load" does not change the behavior. to my understanding in this case domready and load would be the same thing as there are no images or other non dom files as part of this example page.

mplungjan & hielo I've tried pasting your examples as they are without changing anything and I get the same behavior. when the user click out of a field in firefox the alert is fired but the cursor ends up in the next field. I will try experiment with your examples and see if I can make the examples work.

Thanks again for your help
0
hieloCommented:
on the example I posted, this:
      document.getElementById('str').focus();

should be:
      document.getElementById(str).focus();

no apostrophes around str
0
hieloCommented:

<html>
<head>
<!-- <script type="text/javascript" src="js/mootools.js"></script> -->
<script type="text/javascript" src="http://mootools.net/download/get/mootools-1.2.1-core-yc.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
        $('myDate1').addEvent('change', function(e) {
                if ($('myDate1').get('value') == 'stop'){
                        e.stop();
                        alert('You have typed \'stop\'. stay in this field until you type somthing else.');
                        $('myDate1').focus();
				    setTimeout("focusIt('myDate1')",100);
                }
        });
}); 
function focusIt(str)
{
	document.getElementById(str).focus();
}
</script>
</head>
 
<body>
<form>
myDate1 <input id="myDate1" type="text"  name="myDate1" value="" /> 
myDate2 <input id="myDate2" type="text"  name="myDate2" value="" /> 
myDate3 <input id="myDate3" type="text"  name="myDate3" value="" /> 
myDate4 <input id="myDate4" type="text"  name="myDate4" value="" /> 
</form>
</body>
</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
blotsAuthor Commented:
Thank you very much for your help!
0
blotsAuthor Commented:
This is working great. it solves my initial problem.

I see that using the change event is less problematic than using the blur event, the blur event causes recursion problems, for example if user click outside of the browser while in the field, you get an infinite loop of blur events clicking off alert and blurring again.

But, using change event also has a problem. In the example, enter stop, click ok to clear the alert, it does put you back in the field but it will also allow you to continue from there without changing the field. I'll figure this out... but it is a different problem.  

also I did condense the code a bit. it works the same.
<html>
<head>
<!-- <script type="text/javascript" src="js/mootools.js"></script> -->
<script type="text/javascript" src="http://mootools.net/download/get/mootools-1.2.1-core-yc.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
        //$('myDate1').addEvent('change', function(e) {
        $('myDate1').addEvent('blur', function(e) {
                e.stop();
                if ($('myDate1').get('value') == 'stop'){
                        alert('You have typed \'stop\'. stay in this field until you type somthing else.');
                        setTimeout(function() {$('myDate1').focus();},100);
                }
        });
});
</script>
</head>
 
<body>
<form>
myDate1 <input id="myDate1" type="text"  name="myDate1" value="" />
myDate2 <input id="myDate2" type="text"  name="myDate2" value="" />
myDate3 <input id="myDate3" type="text"  name="myDate3" value="" />
myDate4 <input id="myDate4" type="text"  name="myDate4" value="" />
</form>
</body>
</html>

Open in new window

0
blotsAuthor Commented:
there is a form validation library for the mootools framework that has an options to vlaidate on blur, retain focus when a field does not validate, and easily write custom validation functions. This is what I ended up using.

http://mootools.floor.ch/

docs:
http://mootools.floor.ch/docs/formcheck/files/formcheck-js.html

showErrors      0 : onSubmit, 1 : onSubmit & onBlur, by default it is 1.

keepFocusOnError      0 : normal behaviour, 1 : the current field keep the focus as it remain errors.  By default it is 0.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.