Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1830
  • Last Modified:

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

0
blots
Asked:
blots
  • 4
  • 3
  • 2
  • +1
1 Solution
 
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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
 
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

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 4
  • 3
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now