Skip to main content

Notifications

Announcements

Welcome to the Power Platform Communities
Check out the New Agent Creator Community
News and Announcements icon
Community site session details

Community site session details

Session Id :
Power Platform Community / Forums / Power Pages - Customize & Extend / Validation on multi st...
Power Pages - Customize & Extend
Answered

Validation on multi step form mandatory fields

(0) ShareShare
ReportReport
Posted on by ahilisa 32

Hello, 

 

I using a show/hide code depending on the answer to a previous question, the show/hide and mandatory logic all worked fine until the form was changed to a multi step form.  

 

I am adding the code under the custom javascript section on the content page. where or what validation code do I use so that the form wont move on to the next page until the required questions have been answered.  I was able to get the pop up error message to work but when i click ok it moved on the next step of the form anyway by default, how do I override this. 

 

my code

 

 

$(document).ready(function() {
 $("#ahitask_layp02secaq01").change(SetFieldsVisibilityQ1);
 $("#ahitask_layp02secaq01").change();
});

function SetFieldsVisibilityQ1() {
 var selectedValue = $("#ahitask_layp02secaq01").val();

 if (selectedValue != null && selectedValue == "352230000") {
 $("#ahitask_layp02secaq02_label").closest("tr").show();
 $("#ahitask_layp02secaq02").prop("required", true).closest("tr").show();
 $("#ahitask_layp02secaq03_label").closest("tr").show();
 $("#ahitask_layp02secaq03").prop("required", true).closest("tr").show();
 $("#ahitask_layp02secaq04_label").closest("tr").show();
 $("#ahitask_layp02secaq04").prop("required", true).closest("tr").show();
 } else {
 $("#ahitask_layp02secaq02_label").closest("tr").hide();
 $("#ahitask_layp02secaq02").prop("required", false).closest("tr").hide();
 $("#ahitask_layp02secaq03_label").closest("tr").hide();
 $("#ahitask_layp02secaq03").prop("required", false).closest("tr").hide();
 $("#ahitask_layp02secaq04_label").closest("tr").hide();
 $("#ahitask_layp02secaq04").prop("required", false).closest("tr").hide();
 }

 

Categories:
Portals
  • ahilisa Profile Picture
    ahilisa 32 on at
    Re: Validation on multi step form mandatory fields

    Yes I was able to create the code using the service side validation code in the url you gave me.  

  • oliver.rodrigues Profile Picture
    oliver.rodrigues 9,315 Most Valuable Professional on at
    Re: Validation on multi step form mandatory fields

    @ahilisa did you get your issue resolved?

  • LuisAvitia Profile Picture
    LuisAvitia 5 on at
    Re: Validation on multi step form mandatory fields

    You can use this function to add Custom validation to Multiple Step Form

     

     

    if (window.jQuery) {
 (function ($) {
 if (typeof (entityFormClientValidate) != 'undefined') {
 var originalValidationFunction = entityFormClientValidate;
 if (originalValidationFunction && typeof (originalValidationFunction) == "function") {
 webFormClientValidate = function() { //For multiple Step Form
 //entityFormClientValidate = function() { //for Basic Form
 originalValidationFunction.apply(this, arguments);
 // do your custom validation here
 // return false; // to prevent the form submit you need to return false
 // end custom validation.
 return true;
 };
 }
 }
 }(window.jQuery));
}

     

     

     

    If you like this post, give a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users find it.
  • ahilisa Profile Picture
    ahilisa 32 on at
    Re: Validation on multi step form mandatory fields

    thanks @OliverRodrigues could you help me build the correct validator? my experience is limited in this. 

  • Verified answer
    oliver.rodrigues Profile Picture
    oliver.rodrigues 9,315 Most Valuable Professional on at
    Re: Validation on multi step form mandatory fields

    just looking now are your code:

    // Add event listener to the form submission
$("#yourFormId").submit(function(event) {
// Check if the required fields contain data
if (!areFieldsFilled()) {
// Prevent the form from being submitted
event.preventDefault();
alert("Please fill in all required fields.");
}

    This is actually not the correct way to add validation to forms. Please follow this documentation: Add custom JavaScript to a form | Microsoft Learn

  • ahilisa Profile Picture
    ahilisa 32 on at
    Re: Validation on multi step form mandatory fields

    Thanks for the suggestion @OliverRodrigues  this isnt working either, the validation code i am using is.  My code worked find until I moved it to multi step form. Any other suggestions would be appreciated. 

     

    $(document).ready(function() {
    $("#ahitask_layp02secaq01").change(SetFieldsVisibilityQ1);
    $("#ahitask_layp02secaq01").change();

    // Add event listener to the form submission
    $("#yourFormId").submit(function(event) {
    // Check if the required fields contain data
    if (!areFieldsFilled()) {
    // Prevent the form from being submitted
    event.preventDefault();
    alert("Please fill in all required fields.");
    }
    });
    });

    function SetFieldsVisibilityQ1() {
    var selectedValue = $("#ahitask_layp02secaq01").val();

    if (customValidationFunction(selectedValue)) { // Call custom validation function with selected value
    $("#ahitask_layp02secaq02_label").closest("tr").show();
    $("#ahitask_layp02secaq02").prop("required", true).closest("tr").show();
    $("#ahitask_layp02secaq03_label").closest("tr").show();
    $("#ahitask_layp02secaq03").prop("required", true).closest("tr").show();
    $("#ahitask_layp02secaq04_label").closest("tr").show();
    $("#ahitask_layp02secaq04").prop("required", true).closest("tr").show();
    } else {
    $("#ahitask_layp02secaq02_label").closest("tr").hide();
    $("#ahitask_layp02secaq02").prop("required", false).closest("tr").hide();
    $("#ahitask_layp02secaq03_label").closest("tr").hide();
    $("#ahitask_layp02secaq03").prop("required", false).closest("tr").hide();
    $("#ahitask_layp02secaq04_label").closest("tr").hide();
    $("#ahitask_layp02secaq04").prop("required", false).closest("tr").hide();
    }
    }

    // Custom validation function
    function customValidationFunction(selectedValue) {
    // Add your custom validation logic here
    // Example: Check if selectedValue is equal to "352230000"
    return selectedValue != null && selectedValue == "352230000";
    }

    // Function to check if required fields are filled
    function areFieldsFilled() {
    var field2 = $("#ahitask_layp02secaq02").val();
    var field3 = $("#ahitask_layp02secaq03").val();
    var field4 = $("#ahitask_layp02secaq04").val();

    // Check if all required fields contain data
    return field2.trim() !== "" && field3.trim() !== "" && field4.trim() !== "";
    }

  • oliver.rodrigues Profile Picture
    oliver.rodrigues 9,315 Most Valuable Professional on at
    Re: Validation on multi step form mandatory fields

    Hi, ideally you shouldn't keep the JS at the Page level, I would recommend keeping it at the form level (Basic Form or Multistep Form Step in your case).

    Change it to that level and see if you get better results.

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

News and Announcements

Welcome to the Power Platform Communities
Check out the New Agent Creator Community

Quick Links

Michael Gernaey – Community Spotlight

We are honored to recognize Michael Gernaey as our June 2025 Community…

Congratulations to the May Top 10 Community Leaders!

These are the community rock stars!

Announcing the Engage with the Community forum!

This forum is your space to connect, share, and grow!

Leaderboard >

Last month Overall leaderboard

Featured topics

Product updates

Microsoft Power Platform Community release plans