Application Interface with multiple sections and submit buttons

Question

I need to create a user interface. 
 The interface consists of multiple sections, each section will have it's dedicated submit buttons. Each section will have it's own dedicated required fields (using required parameter of field) and fields validations. 
 Now, when I use buttons in each section with validate as true, it checks for the required validity of every section, though that button is not dedicated to those other sections. 
 How can I make it to check only the requiredness and validation of the section which it is dedicated to. 
 In the attached code, when I click "Submit as Future Hire" or "Onboard Employee Now", besides checking the validation or requiredness of the section fields in which it is placed, it is checking for other section as well. 
 Validation groups are also not working properly, when I click "Onboard Employee Now" in first section, it checks for validation of fields "Phone Number" and "Start Date" for first section, the section in which it is placed. That's fine. But, if I click the same button to check the same validation of same fields in other section below, then it checks the validation of fields in second section but at the same time removes the validation which were previously placed in first section. These sections and their requiredness and validations should be independent of each other but the sections should stay in one interface. 
 {
 a!localVariables(
 /*
 * All of these local variables could be combined into the employee CDT and passed into
 * a process model via a rule input
 */
 local!firstName,
 local!lastName,
 local!department,
 local!title,
 local!phoneNumber,
 local!startDate,
 /* 
 * local!isFutureHire is a placeholder varaiable used to set the validation group trigger.
 * When isFutureHire is set to true, a user can skip phone number and start date.
 */
 local!isFutureHire,
 local!isNumberValid: if(len(local!phoneNumber) <= 12, true, false),
 a!sectionLayout(
 label: "Example: Add Employee with Conditional Requiredness",
 contents: {
 a!textField(
 label: "First Name",
 value: local!firstName,
 saveInto: local!firstName,
 required: true
 ),
 a!textField(
 label: "Last Name",
 value: local!lastName,
 saveInto: local!lastName,
 required: true
 ),
 a!dropdownField(
 label: "Department",
 choiceLabels: {
 "Corporate",
 "Engineering",
 "Finance",
 "Human Resources",
 "Professional Services",
 "Sales"
 },
 placeholder: "-- Please Select a Department -- ",
 choiceValues: {
 "Corporate",
 "Engineering",
 "Finance",
 "Human Resources",
 "Professional Services",
 "Sales"
 },
 value: local!department,
 saveInto: local!department,
 required: true
 ),
 a!textField(
 label: "Title",
 value: local!title,
 saveInto: local!title,
 required: true
 ),
 /*
 * When a field has a validation group set, the required parameter and any validations
 * are deferred until the validation group is triggered by a button or link.
 *
 * Multiple validations are added to the phone number field by adding a local variable
 * that turns off required and validation group, but triggers a standard validation
 * upon unfocus from the field (rather than the onboard button click).
 */
 a!textField(
 label: "Phone Number",
 placeholder: "555-456-7890",
 value: local!phoneNumber,
 saveInto: local!phoneNumber,
 required: local!isNumberValid,
 requiredMessage: "A phone number is needed if you're going to onboard this employee",
 validations: if(
 local!isNumberValid,
 "",
 "Please enter a valid telephone less than 12 digits long."
 ),
 validationGroup: if(local!isNumberValid, "F1", "")
 ),
 a!dateField(
 label: "Start Date",
 value: local!startDate,
 saveInto: local!startDate,
 required: true,
 requiredMessage: "A start date is needed if you're going to onboard this employee",
 validationGroup: "F1"
 ),
 a!buttonLayout(
 primaryButtons: {
 a!buttonWidget(
 label: "Submit as Future Hire",
 value: true,
 saveInto: local!isFutureHire,
 submit: true
 ),
 a!buttonWidget(
 label: "Onboard Employee Now",
 value: false,
 saveInto: local!isFutureHire,
 submit: true,
 validationGroup: "F1"
 )
 }
 )
 }
 )
 ),
 a!localVariables(
 /*
 * All of these local variables could be combined into the employee CDT and passed into
 * a process model via a rule input
 */
 local!firstName1,
 local!lastName1,
 local!department1,
 local!title1,
 local!phoneNumber1,
 local!startDate1,
 /* 
 * local!isFutureHire is a placeholder varaiable used to set the validation group trigger.
 * When isFutureHire is set to true, a user can skip phone number and start date.
 */
 local!isFutureHire1,
 local!isNumberValid1: if(len(local!phoneNumber1) <= 12, true, false),
 a!sectionLayout(
 label: "Example: Add Employee with Conditional Requiredness",
 contents: {
 a!textField(
 label: "First Name",
 value: local!firstName1,
 saveInto: local!firstName1,
 required: true
 ),
 a!textField(
 label: "Last Name",
 value: local!lastName1,
 saveInto: local!lastName1,
 required: true
 ),
 a!dropdownField(
 label: "Department",
 choiceLabels: {
 "Corporate",
 "Engineering",
 "Finance",
 "Human Resources",
 "Professional Services",
 "Sales"
 },
 placeholder: "-- Please Select a Department -- ",
 choiceValues: {
 "Corporate",
 "Engineering",
 "Finance",
 "Human Resources",
 "Professional Services",
 "Sales"
 },
 value: local!department1,
 saveInto: local!department1,
 required: true
 ),
 a!textField(
 label: "Title",
 value: local!title1,
 saveInto: local!title1,
 required: true
 ),
 /*
 * When a field has a validation group set, the required parameter and any validations
 * are deferred until the validation group is triggered by a button or link.
 *
 * Multiple validations are added to the phone number field by adding a local variable
 * that turns off required and validation group, but triggers a standard validation
 * upon unfocus from the field (rather than the onboard button click).
 */
 a!textField(
 label: "Phone Number",
 placeholder: "555-456-7890",
 value: local!phoneNumber1,
 saveInto: local!phoneNumber1,
 required: local!isNumberValid1,
 requiredMessage: "A phone number is needed if you're going to onboard this employee",
 validations: if(
 local!isNumberValid1,
 "",
 "Please enter a valid telephone less than 12 digits long."
 ),
 validationGroup: if(local!isNumberValid1, "F", "")
 ),
 a!dateField(
 label: "Start Date",
 value: local!startDate1,
 saveInto: local!startDate1,
 required: true,
 requiredMessage: "A start date is needed if you're going to onboard this employee",
 validationGroup: "F"
 ),
 a!buttonLayout(
 primaryButtons: {
 a!buttonWidget(
 label: "Submit as Future Hire",
 value: true,
 saveInto: local!isFutureHire1,
 submit: true
 ),
 a!buttonWidget(
 label: "Onboard Employee Now",
 value: false,
 saveInto: local!isFutureHire1,
 submit: true,
 validationGroup: "F"
 )
 }
 )
 }
 )
 )
}

Sanchit Gupta (Xebia) · Answer

You need to understand one thing that if a Button is set as a submit button (i.e., when submit parameter is true), then all the validations for required fields which are present in the interface will be evaluated until and unless any of them are mapped to a validationGroup which is not present in the validationGroup of Submit button and if there is no validation thrown then the flow will move to the next node in process i.e., it gets submitted (now you cannot access it back again under normal circumstances). 
 That's why when you click on any of the "Submit As Future Hire" button, you only see validations for all the required fields as you have not mapped any validationGroup to this button. But if you click on "Onboard Employee Now" you get to see all the validations without a group + validations which are present in the group which is set on the clicked button. 
 I don't exactly understand what you are up to but if it is about adding multiple employees at a time then there is no need to provide same buttons for multiple sections, instead only provide button at the bottom of the form and give a dynamic link to the user which when clicked adds a section to add another employee. 
 You may also want to check out a!validationMessage() which allows you to throw validations on section-level which are evaluated when a submit button or normal button with validate parameter set to true is clicked.