Multistep form submit next button not checking code requirement

[ahilisa]

Hi all, 

I have a multistep form which has a save & continue (id=NextButton) and save & exit button (id=Save&Exit).  The issue i am having is when i click on save & continue the form moves to the next step without requiring the end user to populate the required fields. 

The logic is if Q1 is yes then Q2, Q3 and Q4 are required to be completed.

The issue i am having is with the required element of the code, the show/hide element works fine but if the leave the field blank and click the save & continue button the form moves to the next page without the required fields needing to be populated.

The ID for the button is NextButton and the class is btn btn-primary button next submit-btn. There is a JS onclick event on the button which references webFormClientValidate and Page_ClientValidate.

Can anyone please help me with the code i need to achieve this.  i dont understand why only part of my code works. 

The code i am using for this is below:

//if Q1 = Yes show Q2, Q3, Q4
$(document).ready(function() {
  $('.btn.btn-primary.button.next.submit-btn').on("click", function() {
        alert("required fields");
    });
    
    $("#ahitask_layp02secaq01").change(SetFieldsVisibilityQ1);
    $("#ahitask_layp02secaq01").change();

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

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

[erinlubben]

The issue you're facing seems to be related to how the form validation is being triggered (or rather, not being triggered) when the "Save & Continue" button is clicked. The code snippet you've provided does include logic for showing/hiding fields based on the value of Q1, but it does not explicitly check if the required fields are filled out before allowing the form to proceed to the next step.

To address this issue, you'll need to enhance your button click event to include validation checks for Q2, Q3, and Q4 when Q1 is answered "Yes". Here's an improved version of your code that includes a simple validation check for the required fields:

$(document).ready(function() {
$('.btn.btn-primary.button.next.submit-btn').on("click", function(event) {
var isValid = true;
var selectedValue = $("#ahitask_layp02secaq01").val();

// If Q1 is "Yes", check if Q2, Q3, and Q4 are filled
if (selectedValue === "352230000") {
if ($("#ahitask_layp02secaq02").val() === '' || $("#ahitask_layp02secaq03").val() === '' || $("#ahitask_layp02secaq04").val() === '') {
isValid = false;
alert("Please fill in all required fields.");
}
}

// Prevent the form from proceeding if not valid
if (!isValid) {
event.preventDefault();
}
});

$("#ahitask_layp02secaq01").change(SetFieldsVisibilityQ1);
$("#ahitask_layp02secaq01").change();

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

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

This code snippet includes a check to see if Q2, Q3, and Q4 are empty when Q1 is answered "Yes". If any of these fields are empty, it sets isValid to false and shows an alert message to the user, preventing the form from proceeding by using event.preventDefault(). This ensures that the form will not move to the next step until these fields are filled out.

Make sure that the values used in the conditions (e.g., "352230000" for the selected value of Q1) match the actual values used in your form. You might also want to adjust the alert message or the method of notifying the user based on your application's UI and UX requirements.

[Fubar]

Just setting the property required does not force any validation. You need to also add to the Validator object see

https://learn.microsoft.com/en-us/power-pages/configure/add-custom-javascript#additional-client-side...

[ahilisa]

thanks @erinlubben this update to my code does produce a popup box saying all required fields needs to be completed but when i click ok to the popup error the page loads and still moves to the next page of the form sadly

[ahilisa]

@Fubar can you advise how I write this validator based on my code snippet, I am new to this and struggling.  thanks

[ahilisa]

I have written the below validator and added it to the form step custom javascript section and its worked 

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 = "ahitaskValidatorQ234";
            newValidator.controltovalidate = "ahitask_layp02secaq01"; // Assuming this is the field ID for ahitask_layp02secaq01
            newValidator.errormessage = "<a href='#ahitask_layp02secaq01_label' referencecontrolid='ahitask_layp02secaq01' onclick='javascript&colon;scrollToAndFocus(\"ahitask_layp02secaq01_label\",\"ahitask_layp02secaq01\");return false;'>Please ensure Question 2, 3 and 4 are answered.</a>";
            newValidator.validationGroup = ""; // Set this if you have set ValidationGroup on the form
            newValidator.initialvalue = "";
            newValidator.evaluationfunction = function() {
                var ahitask_layp02secaq01_value = $("#ahitask_layp02secaq01").val();
                if (ahitask_layp02secaq01_value === "352230000") {
                    var ahitask_layp02secaq02_value = $("#ahitask_layp02secaq02").val();
                    var ahitask_layp02secaq03_value = $("#ahitask_layp02secaq03").val();
                    var ahitask_layp02secaq04_value = $("#ahitask_layp02secaq04").val();
                    if (!ahitask_layp02secaq02_value || !ahitask_layp02secaq03_value || !ahitask_layp02secaq04_value) {
                        return false; // If any of the fields are empty, validation fails
                    }
                }
                return true; // If condition is not met or all fields are filled, validation passes
            };

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

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