Power Pages: Validate Subgrid Control

Problem Statement

There are situations when you have to verify whether data is present in the subgrid. or you wish to prevent users from submitting the form (basic or multi-step) until they have added at least one entry to the subgrid.

Solution

The simple solution to this problem is to write the following line of JavaScript code:

var IsContactInfoPresent = $("tr").find("[data-entity='arp_contact']").length;
            if(IsContactInfoPresent == 0)
            {     
                alert("Please add atleast one Contact Information before proceed.");        
                return false; 
            }
            else
            {
                return true;
            }

For Multi-Step form, use the following code:

if (window.jQuery) {
   (function ($) {
        webFormClientValidate = function() {
            var IsContactInfoPresent = $("tr").find("[data-entity='arp_contact']").length;
            if(IsContactInfoPresent == 0)
            {     
                alert("Please add atleast one Contact Information before proceed.");        
                return false; 
            }
            else
            {
                return true;
            }
        };
   }(window.jQuery));
}

For Basic Form, use the following code:

if (window.jQuery) {
   (function ($) {
      $(document).ready(function () {
         if (typeof (Page_Validators) == 'undefined') return;
         // Create new validator
         var newValidator = document.createElement('span');
         newValidator.style.display = "none";
         newValidator.id = "contactSubgridValidator";
         newValidator.controltovalidate = "subgridcontrolid";
         newValidator.errormessage = "<a href='#contactsubgrid_label' referencecontrolid='subgridcontrolid' onclick='javascript:scrollToAndFocus(\"contactsubgrid_label _label\",\" subgridcontrolid \");return false;'>Please add atleast one Contact Information before proceed..</a>";
         newValidator.validationGroup = ""; // Set this if you have set ValidationGroup on the form
         newValidator.initialvalue = "";
         newValidator.evaluationfunction = function () {
            var IsContactInfoPresent = $("tr").find("[data-entity='arp_contact']").length;
            if(IsContactInfoPresent == 0)
            {     
                alert("Please add atleast one Contact Information before proceed.");        
                return false; 
            }
            else
            {
                return true;
            }
         };

         // Add the new validator to the page validators array:
         Page_Validators.push(newValidator);

      });
   }(window.jQuery));
}

Demo

In order to demonstrate, I have included a contact table subgrid to the Account form. If I attempt to submit the form without providing any contact details, an error message will appear, as seen in the figure below.