Applying focus to text field, that is linked to a JQuery Calendar Ctrl, after failed validation

Applying focus to text field, that is linked to a JQuery Calendar Ctrl, after failed validation

I am having trouble with the JQuery calendar control, because it’s triggered off of a text input field. 

Important Note: User needs the ability to manually enter the date.

Technologies used in this issue:

  •  ASP.NET using the 3.5 .NET Framework
  • C#
  • jQuery JavaScript Library v1.10.2
  • jQuery UI - v1.10.4
  • All css and image files associated with the smoothness jQuery UI theme

Basically what’s happening is:

  1. User navigates to text field
  2. JQuery Calendar control triggers and pops-up as expected
  3. User decides to manually enter the date and not use the control
  4. Upon clicking/tabbing out of the field validation logic triggers and displays a message beck to the user
  5. User clicks okay to message and the focus is properly set back to the input field, but because the calendar control triggers off the text field the text field loses focus.

  What I want to do is:

  1. Display the validation message to the user
  2. Upon clicking the ok to the validation message highlight the text in the text field
  3. Apply focus to the text field regardless of the calendar control popping up or not

  Current Logic:

   <input type="text" name="saDate" id="saDate" />

    <script>

        $(function() {

            $('#saDate').datepicker(

                {

                    dateFormat: 'mm/dd/yy',

                    monthNamesShort: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],

                    changeMonth: true,

                    changeYear: true

                }

            ).on("change", function() {

                if (!saDateValidation(this)) {

                    $("#saDate").focus();

                }

            });

        });

    </script>


Thoughts? Thanks!!