Question

I have an address user control that encapsulates an address. Has the usual address fields that you would expect. I’ve been receiving errors when users with Safari come to the site because Safari’s autofill seems completely and utterly broken.

This is an example of the (almost) actual post data to the server:

VictimAddressPanel$Address$CityNameItem$txtCityName
123 Fake Street

VictimAddressPanel$Address$ZipCodeItem$txtZipCode
123 Fake Street

It appears that because an outer container has the word “Address” in it that Safari goes OH!!!! OH!!! That’s the street address. So it populates the user’s street address in EVERY address field, including ZIP code. Now, I have also specified the ASP.NET textbox attribute of AutoComplete and set it to “Disabled” Which should tell browser, hey dummy, don’t even try to fill this field. Safari ignores it. And finally, to REALLY add insult to injury, Safari also ignores the maxlength property of textboxes. Even if you say that a field has a maxlength of 2, if in your autocomplete information there are 100 characters, Safari will happily populate the field with 100 characters. As you can imagine, this causes a database exception to be thrown because the field length is too long. Has anyone seen this before? Is there any workaround?

Answer 1

That’s a frustrating issue. It may be easiest to simply change the name to get rid of the $Address portion to prevent this. Otherwise you have some options.

Option One – Validation You could put in validation to limit. For example

<asp:TextBox ID="Zip" runat="server" MaxLength="5"></asp:TextBox>

<asp:RegularExpressionValidator ID="ZipVerify" runat="server"
  ControlToValidate="Zip"
  ErrorMessage="You may only have five characters in the zipcode."
  ValidationExpression="(\s|){0,5}$">
</asp:RegularExpressionValidator>

Option Two – Client Side You may also add in JavaScript verification that fires on submit to stop things. jQuery below

$(document).ready(function () {
    $('form').submit(function () {
        // Verify your fields here
        if ($("Zip").length > 5) {
            //Do something here on error.
        }
    });    
});