NumberField and getElementById

Just a quick lesson learnt today in field:

SCENARIO

You want to use JavaScript to validate certain fields when the SharePoint page is in Edit Mode. You use Control.ClientID ASP.NET property to emit the control ID from the server-side code using Page.ClientScript (usually in PreRender event). You’d usually use this ID to access the control on the client side using document.getElementById.

PROBLEM

I had issues with NumberField (the server-side control that is used to render a numeric column in SharePoint). Its ClientID property is not the same as the one that is finally rendered back. In fact, it’s a child control, two levels down from the NumberField. The reason for this behaviour is that NumberField is a composite templated control, with multiple child controls that compose it.

SOLUTION

Instead of using:

numberFieldCtrl.ClientID

use

numberFieldCtrl.**Controls[0].FindControl("TextField").**ClientID

to get your correct control ID for JavaScript validation code on the page.