1

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>
Sekhar
  • 961
  • 5
  • 15
  • 27
  • it's working, http://jsfiddle.net/x7euD/ – Okan Kocyigit Apr 23 '12 at 09: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 Apr 23 '12 at 10:15
  • How on earth does one focus a `div`? – lonesomeday Apr 23 '12 at 10:18
  • 1
    @challenge, what do you expect on focus()? Are you looking something like [this](http://demos.flesler.com/jquery/scrollTo/)? – Okan Kocyigit Apr 23 '12 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 Apr 23 '12 at 10:32

1 Answers1

2

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/

Okan Kocyigit
  • 13,203
  • 18
  • 70
  • 129
  • thanks a lot - this is what i was expecting. I need the control to be in the first error spotted. jquery document suggests the usage of tabindex - http://api.jquery.com/focus/ as mentioned in your answer. let me try this in the application. – Sekhar Apr 23 '12 at 10:35
  • still doesn't understand why you are trying focus a div, but not important if it works for you, glad to help you :) – Okan Kocyigit Apr 23 '12 at 10:47
  • 1
    In HTML5, any element can receive focus, as long it includes a `tabindex` attribute – Jose Rui Santos Apr 27 '13 at 08:20