asked on

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

Tomarse111

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

Tomarse111

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.

:)

Michel Plungjan

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

hielo

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

blots

ASKER

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

hielo

on the example I posted, this:
document.getElementById('str').focus();

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

no apostrophes around str

ASKER CERTIFIED SOLUTION

hielo

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

blots

ASKER

Thank you very much for your help!

blots

ASKER

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

blots

ASKER

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.