How to validate fields on hidden section?

It gets trickier to deal with when you need to do it this way, but after you've implemented it you'll have a lot more power/control at least.

First, you should keep track of the validity of each section (overall) in a local variable.  i.e. local!SectionAHasValidationError (boolean), etc.  Utilizing a!localVariables() under default settings, you should simply be able to evaluate the validity of your Section A fields with normal logic in the variable definition, and it would update itself anytime any of those values is changed.

Then, as Pedro said above, add a Form Level validation which fires at the Submit event, which itself checks which (if any) of the Section X Validation Error variables is "true", and perhaps advises the user which section has the error - they can then switch back to that section and see the particular validations on the fields themselves.

Thank you Mike for this idea (I was testing such a one),

but how (where) do you set this var local!SectionAHasValidationError ?

In the SaveInto of each field?  (I have more than 30 fields)

Can't we do that once?

(I've tried to do it in the "validations" section, but how?  as "a!save" is forbidden)

ok, using a formlayout is mandatory in your example.
I was trying a solution without a formlayout.  

cedric01 said:

using a formlayout is mandatory in your example

For a process task, I'd suggest that using a!formLayout is mandatory in general.  That's not strictly true, I guess - you could just use a sectionLayout and manually created button layout... but why would you want to?  the FormLayout component just makes things easier.

Ok I understand, thank you Mike.

A last thing, how would you do what I need with a headerContentLayout?
(we have no formLayout just a headerContentLayout)

docs.appian.com/.../Header_Layout.html

You'd need to put the validation in one of your SectionLayouts then.

Yes but in that case, if the sectionA is visible, and sectionB hidden (with some fields in error).

I will still have my problem, the submit button will not trigger the validation of the sectionB errors...
Or maybe I'm missing something.

My first suggestion would be to have a common, informational, top-level section that shows up regardless of which "tab" your user is on.

If not, the solution is still easy: you just duplicate the same validation code across all your sections.  Any given section will have a section-level validation showing i.e. "validation error(s) found in Section A", which would be an array showing a similar message for any section(s) currently reading a validatione error (useful if you have very many).  The advantage here is that it's not too hard to scale up to handle many sections - the only real up-front lift is coding the local variable determining the individual section's error state, and even then all you're really doing is duplicating the "validations" code from the individual components within that section.

but how can you have a top level layoutSection ?
(as a sectionLayout can not contain others layoutSection children)

It would just be an extra section layout that always appears at the top of the current form (think of having an information overview header) which stays constant despite which tab the user clicks into.  There wouldn't need to be a parent/child relationship (since you're correct in that you can't nest sections at any level).

Oh ok, I see...

The only piece I miss, is how to save the result of validations from fields-section to this top level section with this common local var.

Would you have a little example please ?

a!localVariables(
	local!sectionAHasValidationError: null,
	
	// top level section
	a!sectionLayout(
		validations: local!sectionAHasValidationError
	),
	
	// section with error
	a!sectionLayout(
		fieldA,
		fieldB,
		validations: {
		  if(
			and(isnull(fieldA), isnull(fieldB)),
			a!validationMessage(
			  message: "You must enter either a phone number or an email address!",
			  validateAfter: "SUBMIT"
			), /* How to save the validations to  local!sectionAHasValidationError ? */
			{}
		  )
		}
	)
)

Oh ok, I see...

The only piece I miss, is how to save the result of validations from fields-section to this top level section with this common local var.

Would you have a little example please ?

a!localVariables(
	local!sectionAHasValidationError: null,
	
	// top level section
	a!sectionLayout(
		validations: local!sectionAHasValidationError
	),
	
	// section with error
	a!sectionLayout(
		fieldA,
		fieldB,
		validations: {
		  if(
			and(isnull(fieldA), isnull(fieldB)),
			a!validationMessage(
			  message: "You must enter either a phone number or an email address!",
			  validateAfter: "SUBMIT"
			), /* How to save the validations to  local!sectionAHasValidationError ? */
			{}
		  )
		}
	)
)

Try this out:

a!localVariables(
  local!fieldA1,
  local!fieldA2,
  local!fieldB1,
  local!fieldB2,
  local!display: "Section A",
  
  local!sectionAHasValidationError: or(
    rule!APN_isEmpty(local!fieldA1),
    rule!APN_isEmpty(local!fieldA2)
  ),
  local!sectionBHasValidationError: or(
    rule!APN_isEmpty(local!fieldB1),
    rule!APN_isEmpty(local!fieldB2)
  ),
  
  local!validations: reject(
    rule!APN_isEmpty,
    {
      if(local!sectionAHasValidationError,"Error in Section A",null),
      if(local!sectionBHasValidationError,"Error in Section B",null)
    }
  ),

  {
    /*top level section*/
    a!sectionLayout(
      label: "Validation Info",
      validations: local!validations
    ),
    
    a!buttonArrayLayout(
      align: "START",
      buttons: {
        a!buttonWidget(
          label: "Section A",
          value: "Section A",
          disabled: local!display="Section A",
          saveInto: local!display
        ),
        a!buttonWidget(
          label: "Section B",
          value: "Section B",
          disabled: local!display="Section B",
          saveInto: local!display
        )
      }
    ),

    a!sectionLayout(
      label: "Section A",
      showWhen: local!display="Section A",
      contents: {
        a!textField(
          label: "Field A1",
          value: local!fieldA1,
          saveInto: local!fieldA1,
          required: true
        ),
        a!textField(
          label: "Field A2",
          value: local!fieldA2,
          saveInto: local!fieldA2,
          required: true
        )
      }
    ),
    a!sectionLayout(
      label: "Section B",
      showWhen: local!display="Section B",
      contents: {
        a!textField(
          label: "Field B1",
          value: local!fieldB1,
          saveInto: local!fieldB1,
          required: true
        ),
        a!textField(
          label: "Field B2",
          value: local!fieldB2,
          saveInto: local!fieldB2,
          required: true
        )
      }
    )
  }
)

Thank you Chris, it works great but you don't use the validation of SectionA and SectionB...

I would have love to keep the validation of these 2 sections, as these later are in 2 sub-interfaces.

Is there not any way to reuse the validations and then transmit it (as an object reference) to the main form interface?

Here's an updated example, essentially the validations are stored at the top level a!localVariables and reused in both sections:

a!localVariables(
  local!fieldA1,
  local!fieldA2,
  local!fieldB1,
  local!fieldB2,
  local!display: "Section A",
  
  local!sectionAValidations: reject(
    rule!APN_isEmpty,
    {
      if(and(rule!APN_isEmpty(local!fieldA1),rule!APN_isEmpty(local!fieldA2)),"Section A: Enter either field A or field B",null)
    }
  ),
  local!sectionBValidations: reject(
    rule!APN_isEmpty,
    {
      if(rule!APN_isEmpty(local!fieldB1),"Section B: Field B1 is required",null),
      if(rule!APN_isEmpty(local!fieldB2),"Section B: Field B2 is required",null)
    }
  ),
  
  local!validations: reject(
    rule!APN_isEmpty,
    {
      local!sectionAValidations,
      local!sectionBValidations
    }
  ),

  {
    /*top level section*/
    a!sectionLayout(
      label: "Validation Info",
      validations: local!validations
    ),
    
    a!buttonArrayLayout(
      align: "START",
      buttons: {
        a!buttonWidget(
          label: "Section A",
          value: "Section A",
          disabled: local!display="Section A",
          saveInto: local!display
        ),
        a!buttonWidget(
          label: "Section B",
          value: "Section B",
          disabled: local!display="Section B",
          saveInto: local!display
        )
      }
    ),

    a!sectionLayout(
      label: "Section A",
      showWhen: local!display="Section A",
      validations: local!sectionAValidations,
      contents: {
        a!textField(
          label: "Field A1",
          value: local!fieldA1,
          saveInto: local!fieldA1,
          required: rule!APN_isEmpty(local!fieldA2)
        ),
        a!textField(
          label: "Field A2",
          value: local!fieldA2,
          saveInto: local!fieldA2,
          required: rule!APN_isEmpty(local!fieldA1)
        )
      }
    ),
    a!sectionLayout(
      label: "Section B",
      showWhen: local!display="Section B",
      validations: local!sectionBValidations,
      contents: {
        a!textField(
          label: "Field B1",
          value: local!fieldB1,
          saveInto: local!fieldB1,
          required: true
        ),
        a!textField(
          label: "Field B2",
          value: local!fieldB2,
          saveInto: local!fieldB2,
          required: true
        )
      }
    )
  }
)

Thanks a lot Chris, I did the same using RI (because of my sub-interfaces)

but unfortunaltely, because of my sub-interfaces, testing all these fields at the top-level is not a good solution.

For 2 fields, it works well, but for 30 fields I have to find another way to do it.

The top-level section does not have to know all these fields of Sections A and B (and neither to have to test it). The top-level section just has to display an error message or not.