Skip to main content
Nintex Community Menu Bar

Validation Rule in a Nintex Form with Multiple Panels

  • May 14, 2020
  • 2 replies
  • 29 views
Forum|alt.badge.img+1

My form has 4 panels that appear based on the selection of the user:

7776iA8AB8107CCBD1D5C.png

Within each panel are choice controls for Manual and Model and they are named separately:

7777i05F1A3CFC2267599.png

 

I need to set a validation rule for each Model and Manual control in all 4 panels to warn them they have not selected a Model/Manual. Currently, if I do that, the rule is covering all the panels and the user can select the missing choices, but it forces them to have to select also from the other 4 panels, even though the controls are named differently in each panel.

Please kindly help me!

@cassymfreeman 

    2 replies

    MegaJerk
    Forum|alt.badge.img+14
    • MegaJerk
    • Scholar
    • June 10, 2020

    While it's a trivial thing to create a validation rule that does what you need per control / per panel, you may run into additional gotchas depending on the situation, so I have broken this answer up into two parts. The first will cover the Validation and isn't too involved, while the second will cover how to automatically clear the controls inside of a panel that is no longer active. 

    For the sake of time, I have created a truncated version of your form that doesn't have a tabbed setup, but otherwise should be close to representing what is happening.

     

    8114i721635B80817DE7D.png

     

    Here are the Control Names for every control on the Form. Only the RequestType control name is important if you're just worried about validation, while the rest of the names are important if you're interested in clearing the controls (detailed in the second part):

    8115iC702F45E3C134015.png


    (Remember: Panel Control Names are actually set buy their 'title' see below example picture. I just name them both the same for consistency. You'll need to also use these names if you're interested in doing it the way I have it setup in part 2): 

    8116i5AF9B0A138138400.png

     

     

    Part 1 - Validation

     

    Assuming you have named your 'RequestType' control, you can easily create a validation per-Control, per-Panel, by checking the value of the RequestType as well as whether or not the Control being validated is empty.

     

    Example Code for a Control in the Maintenance Library Revision Panel: 

    RequestType === "Maintenance Library Revision" && isNullOrEmpty({Control:Self})

     

    Actual Image of Rule:

    8117i78DEF6633FC7F19F.png

     

    If a Control is in a Panel that corresponds to a different RequestType, remember that you'll need to change the value that is being evaluated in the rule. So while a Control inside of the Maintenance Library Revision Panel will check to see if the Request Type equals "Maintenance Library Revision", a Control in the Other Publications Request Panel will need to check if the Request Type equals "Other Publications Request".

     

    Based on your image, it is likely you will be able to reuse the Validation rule for a given panel among all of the Controls therein. 

     

    Part 2 - Formatting

     

    There may be a time when a user selects a RequestType, makes some selections in the Panel for that Request Type, and then realizes that they actually selected the wrong Request Type and need to change it. Without doing any extra work, you'd end up with values for controls that are technically not being used and do not need to be filled out. This could cause confusion later on. 

     

    To solve for this, you'll need to name at least all of your Panels similarly to how mine have been named in the image above, as well as the Controls (besides labels) that reside in them. Once that has been done, you'll be able to use the following Formatting Rule to make sure that each time you switch between Panels (Tabs, in your case), anything selected in a deactivated panel will be cleared:

    (function(formControlCall, requestType) { var formControlID = formControlCall.split("'")[1] || ""; var targetPanel = sourceContext.find("[formcontrolid='" + formControlID + "'].nf-filler-control"); var targetPanelName = targetPanel.attr("data-controlname"); var clearControls = false; if (requestType) { if (requestType === "Maintenance Library Revision" && targetPanelName !== "MLR") { clearControls = true; } else if (requestType === "Flight Crew / Military Library Revision" && targetPanelName !== "FCMLR") { clearControls = true; } else if (requestType === "Completions Library Revision" && targetPanelName !== "CLR") { clearControls = true; } else if (requestType === "Other Publications Request" && targetPanelName !== "OPR") { clearControls = true; } } else { clearControls = true; } if (clearControls) { targetPanel.find(".nf-filler-control:not" + "([data-controlname='']) :checked").each(function(index, input) { NWF$(input).prop("checked", false).trigger("change"); }); } return clearControls; }("{Control:Self}", RequestType))

     

    By applying this Formatting Rule to every Panel (tip: put the rule on one panel, then select the other three and use the "Add to selected controls" in the rules drop down menu), it will make sure that no extra values are passed along that shouldn't be present (ASSUMING that you only have Checkbox Choice controls in your panel as shown in your example image).

     

    Example Images

     

    (showing the form with no Request Type selected - All Panels Disabled)

    8121iC85D5EC2DC8F7324.png

     

    (Showing the form with the Request Type of "Flight Crew / Military Library Revision" selected, and some selections of the Control in the corresponding Panel)

    8124i3CE5E578368BA01F.png

     

    (Showing what happens when a different Panel is 'Activated' by way of a new Request Type selection)

    8125i7872BE5288BA2B51.png

     

    Additional Considerations

     

    If those Panel Titles are bothersome to you. You can simply add a class to the Panel by way of the Ribbon or Settings Menu called "hideLegend":

    8126iD39821AA1C2EF167.png

     

    By adding the following css rule to your Custom CSS in the Form Options, you'll be able to keep those Control Names / Panel Labels hidden from users:

    .hideLegend legend{display:none;}

     

    Resulting in a form that looks like:

    8127iE182E730D2E27564.png

     

     

    I hope that this helps you to solve your problem

    Forum|alt.badge.img+1
    • jazzycazz
    • Author
    • Novice
    • June 11, 2020

    @MegaJerk This was the perfect solution for my issue! Thank you for the VERY detailed breakdown of the actions required. I am studying the syntax to further understand these operations.  Thank you for taking your time to help!

    Sidebar Buttons
    Nintex Community Home Contact Nintex Support Email Nintex Community Check Nintex Status
    Terms & ConditionsAccessibility statement