Help with calling Apex:Inputfield in Javascript function

Question

So basically I need to create a javascript validation where in It will check my <apex:inputfield>. If it has the value of 0 it will throw a confirm with the field that is 0 and will ask the user if he wants to continue to save. Can someone help me please, been stuck with this one for days.

This is my VF Page

    <apex:page Controller="editLineItemSPRCOMM" cache="false" tabstyle="Opportunity" action="{!initAfter}">

<script type="text/javascript">


    function buttonValidate(){



    }


</script>

<apex:form id="form1" >
    <apex:pageBlock title="Line Item Calculator" id="aa">
        <apex:pageMessages id="pmsg"/>
        <apex:pageBlockButtons >

            <apex:commandButton styleClass="butt1" value="Save and Return" action="{!saveLineItems}" onclick="buttonValidate()"/>
            <!-- <apex:commandButton value="Refresh" action="{!refreshLineItems}"/> -->

        </apex:pageBlockButtons>

        <!-- Line Calculator for EMEA users -->

          <apex:pageblockTable id="table2">
            <!--apex:column headerValue="Recommended End User Discount %"-->
            <apex:column headerValue="Rec. End User Disc %" id="ac">

                <apex:inputField value="{!myVar.item.Rec_EndUser_Disc__c}" id="myNumber">
                    <apex:actionSupport event="onchange" action="{!calculateRecEndUserPrice}" status="counterStatus"  rerender="table2,panel1,counterStatus,pmsg" id="aaa"/>
                </apex:inputField>

        </apex:pageBlockTable>

    </apex:pageBlock>

</apex:form>

I already tried this two function just to try to check if the javascript is getting the values

function buttonValidate(){


      alert(document.getElementById('{!$Component.form1.aa.table2.ac.myNumber}'));

     }

returning null

function buttonValidate(){


      alert(document.getElementById('{!$Component.form1.aa.table2.ac.myNumber}').value);

     }

Not working it's just passing the alert and doing nothing

Can someone help me with this one been stuck for days.

Answer 1

I have tried to build a logic is to validate fields in Javascript when the rows are dynamic.

Approach 1 (using getElementsByTagName())

It will first identify the table element. Then it will loop through each rows of the table, then in each row, it will traverse cell by cell.

Note that, table row count also includes column header, so it has been eliminated in the logic.

Finally it captures the inputField value in this line alert(cells[0].value);

<apex:page standardController="Account">
<script type="text/javascript">
function buttonValidate(){
alert('inside buttonValidate');
//identify the table 
var table = document.getElementById('{!$Component.form1.pgblock1.table1}');
//retrieve the row count
var rowCount = table.rows.length;
//loop through the table rows    


for(var i=0; i < rowCount; i++) {        
    var cells = table.rows[i].getElementsByTagName('input');
    alert('cells=' + cells); 
    //eliminate header row
    if(cells.length>0){
        //print the inputField value
        alert(cells[0].value);
    }
}
}
</script>

<apex:form id="form1">
   <apex:pageBlock title="Customer Master" id="pgblock1">
        <apex:pageBlockButtons >
            <apex:commandButton value="Save and Return" action="{!save}" onclick="return buttonValidate()"/>
        </apex:pageBlockButtons>
      <apex:pageBlockTable value="{!Account.CM__r}" var="cust" id="table1">
         <apex:column headerValue="Name">
             <apex:inputField value="{!cust.Name}"/>
          </apex:column>
      </apex:pageBlockTable>
   </apex:pageBlock>
</apex:form>
</apex:page>

Approach 2 (using getElementsByClassName())

Define styleClass attribute at inputField like:

<apex:inputField value="{!cust.Name}" styleClass="myElement"/>

Traverse the elements based on styleClass names.

function buttonValidateUsingStyleClass(){
alert('inside buttonValidateUsingStyleClass');
//identify the table 
var table = document.getElementById('{!$Component.form1.pgblock1.table1}');
var elements = table.getElementsByClassName('myElement');
alert(elements);

for(var i=0; i<elements.length; i++)
{
    //it will display inputField value
    alert(elements[i].value);
}
}

Both of the approaches are working as expected at my DE