We help IT Professionals succeed at work.
Get Started

jquery textbox not focusing

flynny asked
Last Modified: 2014-03-05
Hi all,

Im hoping im missing something really simple here :).

I have the following code which is testing validation on textboxes; (please forgive the alerts)

<asp:TextBox ID="FirstNameTextbox" CssClass="half" runat="server" MaxLength="30"></asp:TextBox>

    <script type="text/javascript">
        $('#<%=FirstNameTextbox.ClientID%>').watermark('First name');

        $(document).ready(function () {
            $('#<%=FirstNameTextbox.ClientID%>').focusout(function () {

                if ($('#<%=FirstNameTextbox.ClientID%>').val() == "") {
                    alert('about to focus out');
                    highlightField($('#<%=FirstNameTextbox.ClientID%>'), false);
                else {
                    highlightField($('#<%=FirstNameTextbox.ClientID%>'), true);

                alert('got here no issues');

            $('#<%=FirstNameTextbox.ClientID%>').focusin(function () {
                if ($("#<%=FirstNameTextbox.ClientID%>").hasClass("error")) {
                    highlightFieldMessage($('#<%=FirstNameTextbox.ClientID%>'), false, "Please enter your first name in full.");
                    alert('here okkkk');

        function highlightField(textfield, valid) {
            //alert('now here');

            if (textfield.parent().is(".textbox-wrapper")) {
               // alert( textfield.parent().html());
                //alert('removed the status icon');

                //alert('removed any popups');

            //alert('adding the wrapper');
            textfield.wrap("<div class='textbox-wrapper'></div>");

            if (!valid) {
                textfield.removeClass("valid"); //just in case
                textfield.parent().append("<div class='input-status input-cross'></div>");
            else {
               // alert('setting textbox invalid');
                textfield.removeClass("error"); //just in case
                textfield.parent().append("<div class='input-status input-tick'></div>");

        function highlightFieldMessage(textfield, valid, message) {
           // alert('highlightField :' + textfield.attr('id') + ":valid:" + valid + ":MESSAGE:" + message );
            highlightField(textfield, valid);
            alert('here we are afgter sub call');

            if (!valid) {
                textfield.parent().append("<div class='error-popup'>" + message + "<div class='error-popup-arrow'></div></div>");
                textfield.parent().find('.error-popup').css('left', textfield.width() + 58);   
            else {
                textfield.parent().append("<div class='valid-popup'>" + message + "<div class='error-popup-arrow'></div></div>");
                textfield.parent().find('.valid-popup').css('left', textfield.width() + 58);
            alert('ok after adding message etc')

Open in new window

Now when I first load and enter the field (i can enter text at this point into the field) and move out of focus from it it works correctly and highlights it as an error field.

When I move it back into focus it remains highlighted as error and displays the message. However at this point the field is not in focus?? i.e. i cannot type into it.

Am i knocking it out of focus in the code or doing something wrong here?
Watch Question
Distinguished Expert 2020
This problem has been solved!
Unlock 1 Answer and 8 Comments.
See Answer
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE