Question

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> 

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.net/x7euD/3/