cancel
Showing results for 
Search instead for 
Did you mean: 
courtney_shelto
Nintex Newbie

Re: Skip pages in multi page form based on multi-select choice field?

Jump to solution

Hey Thomas,

I'm not showing the panel immediately upon clicking the checkbox, each panel is a "page" and which pages get shown while pressing Next and Previous are determined by which checkboxes are checked (ex if the user doesn't want to have an Employee transfer to their team, we'll skip that panel/page). So, I *do* need the "Next" and "Previous" buttons. And if I don't make sure that they have filled the fields before clicking next, I think it would be a nightmare to show them where they missed a field since they're all separate "pages". I was thinking of having each panel that they've selected show on the last page as well, that way it's kind of a "final check" and if any of the fields aren't entered, they can see them right there. And then, the final "Save and Submit" button can do all of the final validations and checks. Thoughts on that method?

0 Kudos
Reply
Highlighted
thomas_xu
Nintex Newbie

Re: Skip pages in multi page form based on multi-select choice field?

Jump to solution

I see. In that case you may need to add a function validateStep in your nextPage and previousPage functions. Based on the current step it validates the mandatory fields in that panel shown for that step.  In your final check you probably only need to validate the last page as all previous page validations would have already been completed. 

0 Kudos
Reply
courtney_shelto
Nintex Newbie

Re: Skip pages in multi page form based on multi-select choice field?

Jump to solution

Hey Thomas,

Could you go into a bit more detail about that method?

0 Kudos
Reply
thomas_xu
Nintex Newbie

Re: Skip pages in multi page form based on multi-select choice field?

Jump to solution

Ok I have not tested the code below but just put it here to give you an idea. You will need to associate all your mandatory fields with a unique css class name . Then validate each panel/step by calling a different function . I have included validateLandingPage as an example below. In that function you need to validate each mandatory control that you want to validate on that page by the unique css class name. This way you can reuse the validation function, i have put validateText as an example. Let me know if it make sense. Think it should work in your scenario. 

function nextPage() {
     if(validateStep(currentLocation))
     {
     goStep(chosenOptions[++currentLocation]);
     console.log("Nexting to page " + currentLocation + ": " + chosenOptions[currentLocation]);
     }
}


function validateStep(currentLocation)
{
     var validStep=false;
     
     if(currentLocation ==1)
     {
          validStep= validateLandingPage()
          
     }
     
     //insert other location logic
     
}

function validateLandingPage()
{
  var validLandingPage=true;
 
     if(!validateText(".mandatoryTextControl_1"))
     {
          validLandingPage=false;
     }
     
     if(!validateText(".mandatoryTextControl_2"))
     {
          validLandingPage=false;
     }
     
     //Insert all other mandatory controls for this page
     
}

function validateText(cssClass)
{
     var valid= false;

     // Ensure field is visible (not hidden by form Rules or javascript)
     var fieldDisplayed = NWF$(cssClass).is(":visible");
     
     //auto skip validation when fields not visible
     if (!fieldDisplayed) {
          valid = true;
          return;
     }
     if (arguments.Value === undefined || arguments.Value === null || arguments.Value === "") {
          valid = false;
          //highlight border in red
          NWF$(cssClass).addClass("nf-error-highlight").change();
          return;
     }
     else {
          valid = true;
           NWF$(cssClass).removeClass("nf-error-highlight").change();
     }
     return valid;
     
}

Reply
courtney_shelto
Nintex Newbie

Re: Skip pages in multi page form based on multi-select choice field?

Jump to solution

Hey Thomas,

I really appreciate your help with this. For some reason, it's always finding the value as undefined, even when text is entered.

I added some logging to your original file and here's what I get:

The [".mandatoryTextControl_2"] that's logged is when I have console.log(arguments); and the following undefined is console.log(arguments.Value);

It is highlighting the text box correctly though!

0 Kudos
Reply
thomas_xu
Nintex Newbie

Re: Skip pages in multi page form based on multi-select choice field?

Jump to solution

Made some edits to the function and tested this time

function validateText(cssClass)
{
     var valid= false;

     // Ensure field is visible (not hidden by form Rules or javascript)
     var fieldDisplayed = NWF$(cssClass).is(":visible");
     
     //auto skip validation when fields not visible
     if (!fieldDisplayed) {
          valid = true;
          return;
     }
     
      var fieldValue=NWF$(cssClass +" input")[0].value
     if (fieldValue === undefined || fieldValue === null || fieldValue === "") {
          valid = false;
          //highlight border in red
          NWF$(cssClass).addClass("nf-error-highlight").change();
          return;
     }
     else {
          valid = true;
           NWF$(cssClass).removeClass("nf-error-highlight").change();
     }
     return valid;
    
}
0 Kudos
Reply
courtney_shelto
Nintex Newbie

Re: Skip pages in multi page form based on multi-select choice field?

Jump to solution

Hey Thomas,

Perhaps I've done something incorrectly, as it's not working for me:

I was able to get an actual value by storing client ID in javascript variable and then .val() that, but then I'm not sure how to translate that back into changing the css of the field and highlighting it in red. Also, even though it gets a value, it didn't advance the page (though I can see in the logging that valid = true).

0 Kudos
Reply
thomas_xu
Nintex Newbie

Re: Skip pages in multi page form based on multi-select choice field?

Jump to solution

Sorry for super late reply. Just got back from holiday. You may have already found a solution for this. 

The one other thing i can see i missed out the return statement for validLandingPage. 

The best way to debug is to bring up developer tool by hitting F12 and set breakpoints so you can see where it has failed. Let me know how you go.

function validateLandingPage()
{
  var validLandingPage=true;
 
     if(!validateText(".mandatoryTextControl_1"))
     {
          validLandingPage=false;
     }
    
     if(!validateText(".mandatoryTextControl_2"))
     {
          validLandingPage=false;
     }
    
     //Insert all other mandatory controls for this page
     return validaLandingPage;
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
0 Kudos
Reply