InvalidCharacterError in IE only

Question

We have an order form that uses a ziplookup feature for when a zipcode is entered into a field, the city, county, state and zip are then entered into the same field.

    <tr>
        <td class="formLabel" id="<%=prefix%>.ZipCodeLookup.label">Zip Code</td>
        <td class="formColon">:&nbsp;</td>
        <td class="formData">
            <div id="zipOutput"></div>
            <input type="hidden" id="<%=prefix%>.city" name="<%=prefix%>.city" value="<%=City%>" />
            <input type="hidden" id="<%=prefix%>.county" name="<%=prefix%>.county" value="<%=County %>" />
            <input type="hidden" id="<%=prefix%>.state" name="<%=prefix%>.state" value="<%=State%>" />
            <input type="hidden" id="<%=prefix%>.zip" name="<%=prefix%>.zip" value="<%=Zip %>" />
        </td>
    </tr>

The error on IE only is:

lib.functions.dom.createInput// type=text name=shipping.ZipCodeLookup id=shipping.ZipCodeLookup // InvalidCharacterError

lib.objects.window.LookupWidget.createInputField() // Unable to set property 'value' of undefined or null reference

Solution

The problem here is probably that you are using a period in the id and name fields of your HTML. IE seems to think that is not valid HTML. Most browsers are more forgiving than IE for this kind of violation. Also note that many frameworks allow it through automatic escaping.

If you remove the period from those fields, everything should work, provided all of the characters in your prefix variable are valid for use in these fields.