Prevent Advancing to the Next Step in a Multi-step Form

Scenario:
– On a multi-step form step, a subgrid’s visibility is conditioned on the value of some field.
– When the subgrid is displayed and it is empty, the user gets an alert that the subgrid should contain a record upon clicking the Next button.
– If the subgrid contains contains a record(s) but the value of a certain is not met by at least one of them, the user gets an alert saying so, again upon clicking the Next button.

<script>
$(document).ready(function() {
    window.webFormClientValidate = function () {
        var documentSubgridHeaderVisible = $("#Subgrid_new_4 table.table.table-striped thead").is(":visible");
        
        if (!documentSubgridHeaderVisible) {
            return true; // Allow to proceed to the next step
        } else {
            var recordCount = $("#Subgrid_new_4 table.table.table-striped tbody tr").length;
            if (recordCount > 0) {
                // Custom validation: count rows with "File Uploaded?" as "No" or "Non"
                var documentCount = 0;
                $("#Subgrid_new_4 table.table.table-striped tbody tr").each(function() {
                    var fileUploadedStatus = $(this).find("td:nth-child(2)").text().trim();
                    if (fileUploadedStatus === "No" || fileUploadedStatus === "Non") {
                        documentCount++;
                    }
                });

                console.log("Document count for 'File Uploaded?' as 'NO': " + documentCount);

                // If any rows have "No" or "Non", prevent form submission
                if (documentCount > 0) {
                    alert("{{ snippets['Message/NoUploadedDocument'] }}");
                    return false; // Prevent form submission
                }
            } else {
                alert("{{ snippets['Message/NoDocument'] }}");
                return false; // Prevent form submission
            }

        }
        return true;
    };
});
</script>

Note that the Subgrid_new_4 should be replaced with the id of your subgrid. Also, the code is added in the Custom Javascript box of the Form Step (Multistep Form > Form Step > Form Options tab > Custom Javascript section.)

That’s all.

References:
https://community.powerplatform.com/forums/thread/details/?threadid=2ea852dc-7a6f-46b0-aec6-5c3e93cd86ec
https://learn.microsoft.com/en-us/power-pages/configure/add-custom-javascript#general-validation