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)

You would set that and similar local variables in the top-level variable declaration of your form.  As I already mentioned, the variable will re-evaluate automatically when any of the other data it uses is changed (assuming you're using a!localVariables() under default settings).

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.

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 ? */
			{}
		  )
		}
	)
)

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?