Javascript validation not working ($Component notation problem)

Question

I have one vf page where after clicking on Contacts tab I want check whether user has entered value in "tab1_Name" inputText under AccDetails tab. I am trying to access the "tab1_Name" id using $Component notation, however everytime its value is null. Any help/suggestion will be greatly appreciated.

<apex:page controller="TestController" showHeader="true"  > 
<apex:form >
<apex:tabPanel switchType="client" selectedTab="tabdetails" id="AccountTabPanel" 
    tabClass="activeTab" inactiveTabClass="inactiveTab"> 

    <apex:tab label="Details" name="AccDetails" id="tabdetails"> 

        <apex:inputText id="tab1_Id" label="tab1_Name" value="{!AccountList}"/>
    </apex:tab> 

    <apex:tab label="Contacts" name="Contacts" id="tabContact" onclick="validate()"> 

        <apex:inputText id="tab2_Id" label="tab2_Name2" value="{!AccountList}"/>
    </apex:tab>   
</apex:tabPanel> 
</apex:form>
<script language="javascript">
function validate()
{
try
{
var fNameObj = document.getElementById('{!$Component.AccountTabPanel.tabdetails.tab1_Id}');
alert("inside validate"+fNameObj);
if(trim(fNameObj.value) == "")
{
alert("tab1Name is mandatory!");
return false;
}
return true;
}
catch(e)
{
alert(e);
return false;
}
}
</script>
</apex:page>

Answer 1

This took a little bit of troubleshooting by looking at the page source. I added an id to the page and the form tags and then looked at the source to see what the rendered id was on the tab's input field. This gave me the correct structure for the $Component reference path.

It turns out that the AccountTabPanel and tabdetails elements are not part of the DOM id structure. The structure that works looks like this: document.getElementById('{!$Component.thePage.theForm.tab1_Id}');

<apex:page id="thePage" showHeader="true" controller="TestController">
    <apex:form id="theForm" >
        <apex:tabPanel switchType="client" selectedTab="tabdetails" id="AccountTabPanel" tabClass="activeTab" inactiveTabClass="inactiveTab">

            <apex:tab label="Details" name="AccDetails" id="tabdetails">

                <apex:inputText id="tab1_Id" label="tab1_Name" value="{! AccountList}" />
            </apex:tab>

            <apex:tab label="Contacts" name="Contacts" id="tabContact" onclick="validate()">

                <apex:inputText id="tab2_Id" label="tab2_Name2" value="{! AccountList}" />
            </apex:tab>
        </apex:tabPanel>
    </apex:form>
    <script language="javascript">
        function validate() {
            try {
                var fNameObj = document.getElementById('{!$Component.thePage.theForm.tab1_Id}');
                alert("inside validate" + fNameObj);
                if (trim(fNameObj.value) == "") {
                    alert("tab1Name is mandatory!");
                    return false;
                }
                return true;
            }
            catch (e) {
                alert(e);
                return false;
            }
        }
    </script>
</apex:page>

Answer 2

If you want to continue with the $Component way, you need to give an id to <apex:form> and start from form. As long as the VF element is wrapped in either in <apex:form> or <apex:pageblock>, you need to start with those two elements.

Otherwise, if you are using jQuery, you can simply use:

$('input[id$="tab2_Id"]')