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);
}
}
});
