Unanswered

Validation on multi step form mandatory fields

(0) Share

Report

Posted on by ahilisa

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:

Customize & extend

I have the same question (0)

All responses (7)

Answers (1)

oliver.rodrigues 9,368 Most Valuable Professional on at

Like (0)

Report

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.

Was this reply helpful? Yes No
ahilisa 32 on at

Like (0)

Report

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() !== "";
}

Was this reply helpful? Yes No
Verified answer

oliver.rodrigues 9,368 Most Valuable Professional on at

Like (0)

Report
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

Was this reply helpful? Yes No
ahilisa 32 on at

Like (0)

Report

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

Was this reply helpful? Yes No
LuisAvitia 5 on at

Like (0)

Report
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.

Was this reply helpful? Yes No
oliver.rodrigues 9,368 Most Valuable Professional on at

Like (0)

Report

@ahilisa did you get your issue resolved?

Was this reply helpful? Yes No
ahilisa 32 on at

Like (1)

Report

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

Was this reply helpful? Yes No