I have a form which when submitted(empty fields) displays spring validated errors in the front end jsp . I need to focus the display in the first error message displayed in the front end. Generated code from the form (via view source): For example 2 error message enclosed inside div element. I need to focus it on the first error message.

      <div id="userid.errors" class="lp">User id is missing</div>
      <div id="age.errors" class="lp">age is missing</div>

I tried the below jquery code, but it works only in IE and not in firefox. In firefox , focus is not working eventhough css style handled properly.

I am sure syntax and logic is correct - could some one help me out in fixing it for firefox browser ?

<script type="text/javascript" src="/scripts/jquery.min.js"></script>
<script type="text/javascript" src="/scripts/jquery.validate.js"></script>

 <script type="text/javascript">

 $(document).ready(function() {
$("[id$='.errors']:first").css("background-color","#FFFFCC");
     setTimeout(function(){
     $("[id$='.errors']:first").focus();
    },300);

 });
 </script> 

I have a form which when submitted(empty fields) displays spring validated errors in the front end jsp . I need to focus the display in the first error message displayed in the front end. Generated code from the form (via view source): For example 2 error message enclosed inside div element. I need to focus it on the first error message.

      <div id="userid.errors" class="lp">User id is missing</div>
      <div id="age.errors" class="lp">age is missing</div>

I tried the below jquery code, but it works only in IE and not in firefox. In firefox , focus is not working eventhough css style handled properly.

I am sure syntax and logic is correct - could some one help me out in fixing it for firefox browser ?

<script type="text/javascript" src="/scripts/jquery.min.js"></script>
<script type="text/javascript" src="/scripts/jquery.validate.js"></script>

 <script type="text/javascript">

 $(document).ready(function() {
$("[id$='.errors']:first").css("background-color","#FFFFCC");
     setTimeout(function(){
     $("[id$='.errors']:first").focus();
    },300);

 });
 </script> 

• javascript
• jquery
• error-handling
• focus
• settimeout

• it's working, jsfiddle/x7euD – Okan Kocyigit Commented Apr 23, 2012 at 9:59
• hi ocanal, it works for input tags, but i need it for div tags . I have modified the original question with div tag code sample . I need the jquery to work in firefox. Currently code works in IE. – Sekhar Commented Apr 23, 2012 at 10:15
• How on earth does one focus a div? – lonesomeday Commented Apr 23, 2012 at 10:18
• 1 @challenge, what do you expect on focus()? Are you looking something like this? – Okan Kocyigit Commented Apr 23, 2012 at 10:31
• @lonesomeday , my form page has a big image on the top and form fields t the bottom. When a user tries to submit the empty form, errors will be generated nearby the input fields. Error messages are returned from the server encapsulated in div tag as shown above. Please let me know how to do i ensure the user control is pointed to the field which has error ? . The above jquery code snippet worked for me in IE browser perfectly, user control moved to that div tag area. My approach may be wrong, but my understanding is that all latest browsers support focus to visible elements. – Sekhar Commented Apr 23, 2012 at 10:32

1 Answer 1

I did not understand why you are trying to focus a div and what you expect, normally you can't focus a div, but you can do that like this,

$(document).ready(function() {
$("[id$='.errors']:first").css("background-color","#FFFFCC");
     setTimeout(function(){
         $("[id$='.errors']:first").attr("tabindex",-1).focus();
         alert(document.activeElement.innerHTML+ "is focussed");
    },300);
 });​​

http://jsfiddle/x7euD/3/