About the author

Vijay Kodali
E-mail me Send mail

Recent comments

Authors

Disclaimer

The opinions expressed herein are my own personal opinions and do not represent my employer's view in anyway.

© Copyright 2024

onblur bug with RequiredFieldValidator and Google chrome browser

I came across a bug with Google chrome ver 1.0.154.43 while answering a problem in asp.net forums.

Problem:

Chrome browser ignores "onblur" event function for input box while it has Required field validator attached to it . Check this code..

  <input id="txt1" runat="server" type="text" maxlength="16" style="width: 127px" onblur= "formatSSN();"/>
  <asp:RequiredFieldValidator ID="Rfssn" runat="server" ControlToValidate="txt1" Display="None" ErrorMessage="SSN" 
     SetFocusOnError="True" EnableViewState="False">
  </asp:RequiredFieldValidator>
  <script language="javascript" type="text/javascript">
   function formatSSN() 
  {
    var ssn = document.getElementById("txt1").value;
    if(ssn.length == 9) 
        {
            document.getElementById("txt1").value= ssn.substring(0, 3) +"-" + ssn.substring(3, 5) + "-" + ssn.substring(5, 9); 
            return false;
        }
  }
  </script> 

The code works fine in IE6/7 & FireFox3, but not in Google chrome .

Solution:

I think the problem is with required field validator's SetFocusOnError property. Setting SetFocusOnError="false" for Rfv will fix it in chrome.


Posted by vijay on Saturday, January 24, 2009 8:15 PM
Permalink | Comments (5) | Post RSSRSS comment feed

Comments

Jaime Brazil

Monday, November 16, 2009 5:26 PM

Jaime

Yeah, this works for the requiredfieldvalidator, but not for the regularexpressionvalidator. I have a Fileupload to upload images, and I validate it to see if it's a .jpg file. Chrome consistenly pops up the validator's error msg, even the the file being uploaded is .jpg. Works as expected in IE and FF. Any ideas?

Tim United States

Monday, January 18, 2010 3:54 PM

Tim

I was having similar problems and found that some validation functions worked via an onblur handler in Chrome while others did not. For example, I have a required() function that simply tests for an empty input box. It failed in Chrome. I have a validphone() function that tests for a valid phone number in an input box. It worked in Chrome called from an onblur handler. Go figure.

In my case, the validation functions were added via server-side php code. My eventual solution was to use jQuery to remove those handlers and re-add them.

var is_chrome = /chrome/.test( navigator.userAgent.toLowerCase() );
$(document).ready(function(){
  if(is_chrome) {
    $("input, textarea").each(function(){
      if($(this).hasClass('required')) {
        // required fields in my case have the class="required" attribute
        $(this).removeAttr('onblur');
        $(this).blur(function () {
          required(); // the call to my required() function
        });
      }
    });
  } // end if(is_chrome)
}); // end document_ready

My validation handlers now work in IE6/7/8, Firefox, Safari, and (phew!) Chrome.

Tim

Tim United States

Monday, January 18, 2010 3:55 PM

Tim

Sorry, your comment engine removed all my indents so the code is a bit ugly.

vijay United States

Monday, January 18, 2010 9:29 PM

vijay

No Problem Tim. That was a good workaround!!

Alex Lee United States

Sunday, May 30, 2010 7:13 PM

Alex Lee

Thanks for posting!

Add comment


(Will show your Gravatar icon)

  Country flag

biuquote
  • Comment
  • Preview
Loading