[SalesForce] JQuery validation in VF page does not work in IE9

I have added jquery validation to my visual force page controls. The validation works fine in IE8 but not working in IE9. I tried the following to check what goes wrong.

  1. Different versions of jquery from jquery-1.4.2.min.js to latest version.
  2. Changed the IE document mode from IE9 to IE8/IE7 from browser.
  3. Tried emulating IE9 to IE8 using the meta tag

    meta http-equiv=\"X-UA-Compatible\" content=\"IE=EmulateIE8\"

But none of this solved my issue. I guess, I need to do some browser check or something like that. But have not clue. Can anybody help me with this.

Best Answer

I have also faced same kind of issue with Jquery validation not working in IE9 in my VF page, worked out all the possibilites that you have tried, and finally came to know the problem is with, IE document compatibility meta tag issue.

Error in IE browser console: "HTML1115:X-UA-Compatible META tag ('IE=8') ignored because document mode is already finalized" .

To use IE document compatibility meta tags, the tag must be the 1st element in the head section, else it will not take effect. The title tag seems to be an exception to that rule.

<apex:outputText escape="false" value="{!'<meta http-equiv=\"X-UA-Compatible\" content=\"IE=EmulateIE8\"  />'}"/>
<apex:outputText escape="false" value="{!'<ext:ResourcePlaceHolder runat=\"server\" Mode=\"Style\" />'}"/>

When the head tag has runat="server", the Ext.Net resource manager inserts the style sheet resource as the first element in head section. This behavior prevents compatibility tags from working and displays an error/warning message in the IE browser console on IE 9.

Related Topic