0

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.

  • There is a mistake in your Component structure it should be {!$Component.form1.aa.table2.ac.myNumber}. I believe it will also not work as the components are generated in loop and VF still does not support dynamic ID. – Saroj Bera Oct 28 '16 at 14:42
  • I just actually forget to update that one but in my vf page it's "pageblock". So do you have any solution that I can use that will work as a validation to check my input fields if I have a 0 value? Thank you so much for your reply @SarojBera – JMDF Oct 28 '16 at 14:53
0

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

  • You could also add a class name like .validate to the inputs and use the class as a selector. You could then use data-name to define the type of validation. Eaiser that iterating over elements to find what you want. Have also used the record id in data-name in combination to identify specific records when doing stuff like this – Eric Oct 28 '16 at 17:14
  • Styleclass can be added to inputfields. developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/… – Eric Oct 28 '16 at 17:27
  • I have updated with the 2nd approach, thanks – Santanu Boral Oct 28 '16 at 17:44
  • I actually have tried using StyleClass before but it is only checking only 1 row of data. – JMDF Oct 28 '16 at 17:48
  • now, it is dynamic, hope it will solve your problem – Santanu Boral Oct 28 '16 at 17:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.