jquery validation for multiple lookup field in visualforce

Question

I created a table using with Account lookup field along with other fields. I have assigned same style class name to all lookup as they're mandatory. VF code:

 <apex:page>
   <apex:pageblock>
    <apex:pageblocktable value="{!conList}" var="c">
    <apex:column><apex:outputText value="{!c.Name}" /></apex:column>
    <apex:column><apex:inputField value="{!c.AccountId}" style="reqCheck"/></apex:column>
    </apex:pageblocktable>
   <apex:commandButton value="save" onclick="if(!Validation()){return false;}" />
   <apex:pageblock>
    </apex:page>

User will get a list of contacts who can change the Account but can't put null value in account before saving. On save buttons have executed a jquery validation as follows:

<script>
    function Validation(){
        var index;
        $('.reqCheck').each(function(){
            index = 0;
             var r1=$.trim($(this).val());
             if(!r1){
                 index = 1;
                 alert('Account is empty.Please fill it');
                 $(this).focus();
                 return false;
             }

        });
        if(index == 0) return true;
             else return false;
    }
</script>

Problem: Here,in html(inspect element) style class 'reqCheck' is assigning for lookup icon too. And my javascript code is checking the lookup icon value which will be null and throwing the error even if the accountId is filled.

Is there any work around for it?

Answer 1

I recommend you just set required="true" on your <apex:inputField> tags:

<apex:inputField value="..." class="..." required="true" />

If you do the above you can strip out all your javascript tags.

If you insist on rolling your own Javascript here, note that you can just change your selector to 'input.reqCheck':

$('input.myClass').forEach(...)

That said, you shouldn't use jQuery unless you have to, and definitely don't reference it using a $ outside of a closure. You should only define your functions within such a closure anyway.

(function () {
    // add a class to your save button
    document.querySelector('.saveButton').addEventHandler("click", function () {
        [].forEach.call(
            document.getElementsByClassName("myRequiredClass"), 
            function (element) {
                console.log(element.value);
                // or do a real operation
            }
        );
    });
}());

Answer 2

I got a better work around(I hope so). In my case, lookup position value is even number. So, i planned to skip the even numbers(which are look up icon values) of the list while comparing as follows:

function Validation(){
    var index;
    **var int1 = 0;**
    $('.reqCheck').each(function(){
        index = 0;
         var r1=$.trim($(this).val());
         if(!r1 && **int1%2 == 0**){
             index = 1;
             alert('Account is empty.Please fill it');
             $(this).focus();
             **int1 = parseInt(int1)+1;**
             return false;
         }
             **int1 = parseInt(int1)+1;**

    });
    if(index == 0) return true;
         else return false;
}

Above trick worked for me. Please let me know, if there is any issue with my code.

Thank You.