SharePoint 2010 Fix for Spell Check of Publishing Site UserField Using JQuery

Out of the box, the SharePoint 2010 includes an awesome Spell Check feature for Publishing sites. But if you have a UserField on your Layout page, it will also spell check hidden XML codes used by the People Picker control and report dozens of invisible errors. As of this posting, I know of no supported fix from Microsoft, but it is a simple fix with jQuery.

First, wrap the control in a div on your layout page to target the fix and hopefully avoid any unintended consequences elsewhere on the page. Then use the jQuery ready function to add SharePoint magic attribute for Html TEXTAREAs and SharePoint magic Css class for the hidden Html INPUT. You could use regular CSS instead of jQuery for just adding the ms-spellcheck-false class, but keeping the fix together in one snipped is nice.

<div class="NoSpellCheck"> 
<SharePointWebControls:UserField ID="UserField1" FieldName="UserField1" runat="server" />  
</div>
<script type="text/javascript"> 
jQuery(document).ready(function() { 
jQuery(".NoSpellCheck input").addClass("ms-spellcheck-false");  
jQuery(".NoSpellCheck textarea").attr("excludeFromSpellCheck","true");
});
</script> 

Problem solved. Your publishing authors will thank you!