Validation for inputFields inside Pageblock table is not working

Question

I am trying to do a simple validation, if qty received ENTERED is different than qty ordered, a JQuery dialog box should open. For some reason this validation is working only for the first inputField. the code works if I have ONLY one record or row. but, for example if the numbers do not match in row 5 the validation doesn't occur. I will appreciate any help

Buttons:

   <button type="button"  onclick="validateReceived();">Save Shipment</button>
    <apex:commandLink id="savingButton"   action="{!SaveShipment}"  value="Save Shipment"  reRender="theForm" oncomplete="javascript: LoadStuff();"/>

Code page:

   <apex:pageBlockTable value="{!Details}" var="d" id="thePageblock">

      <apex:column headerValue="NRCode" value="{!d.NRCode}"/>     
      <apex:column headerValue="Ordered" >
             <apex:outputText value="{!d.Ordered }" id="ordered" />
      </apex:column>
       <apex:column headerValue="Received">
             <apex:inputText value="{!d.Received}" id="received"  />
       </apex:column>                
 </apex:pageBlockTable >

jquery validation:

   <!--to validate qty received when it doesn't match qty ordered-->
   <div id="dialog" title="Form Validation!" style="display:none;">
    <p>The qty received entered DO NOT match the qty ordered.<br></br>
        Would you like to continue?</p>
   </div>
   <script>

   function validateReceived(){
        var ordered= jQuery('[id$="ordered"]').val();
        var received= jQuery('[id$="received"]').val();
    if( ordered != received){

               $(function() {
                        $("#dialog").dialog({
                        modal: true,
                        resizable: false,
                        buttons: {
                        "Yeah!": function() {
                        jQuery('[id$="savingButton"]').click();
                        $(this).dialog("close");
                        },
                        "No": function() {
                        $(this).dialog("close");
                        }
                        }
                    });
                });


    }else{

      jQuery('[id$="savingButton"]').click();
    }    

   }

Answer 1

Take a look at the documentation on the jQuery.val() function.

Get the current value of the first element in the set of matched elements or set the value of every matched element.

Your code will only compare the first two elements on the list of elements returned by the selector.

If you want to compare each one then you need to iterate over the lists instead. You can do that different ways. One way is as follows. You may want to wait to show the dialog or save until outside of the loop, though, depending on your requirements.

function validateReceived() {
    var ordered= jQuery('[id$="ordered”]’);
    var received= jQuery('[id$="received”]’);

    for (var i = 0, cnt = ordered.size(); i < cnt; i++) {
        if ( ordered.eq(i).val() != received.eq(i).val() ) {
            $(function() {
                $("#dialog").dialog({
                    modal: true,
                    resizable: false,
                    buttons: {
                        "Yeah!": function() {
                            jQuery('[id$="savingButton"]').click();
                            $(this).dialog("close");
                        },
                        "No": function() {
                            $(this).dialog("close");
                        }
                    }
                });
            });

        } else {
            jQuery('[id$="savingButton"]').click();
        }    
   }
}

You could also wait to display the dialog until after the loop, and just track whether or not there have been mismatches during the loop execution (again, dependent on the requirements):

function validateReceived() {
    var ordered= jQuery('[id$="ordered”]’);
    var received= jQuery('[id$="received”]’);

    var mismatches = 0;

    for (var i = 0, cnt = ordered.size(); i < cnt; i++) {
        if ( ordered.eq(i).val() != received.eq(i).val() ) {
            mismatches++;    
        }
    }
    if (mismatches > 0) {
        $(function() {
            $("#dialog").dialog({
                modal: true,
                resizable: false,
                buttons: {
                    "Yeah!": function() {
                        jQuery('[id$="savingButton"]').click();
                        $(this).dialog("close");
                    },
                    "No": function() {
                        $(this).dialog("close");
                    }
                }
            });
        });
    } else {
        jQuery('[id$="savingButton"]').click();

    }
}