Form.yml disable required on hidden elements

Hi All,

When working with dynamic fields in form.yml I noticed that if a hidden element has required: true the form will not be submittable unless the hidden element has a default value.

Here is an example:

  sub_type:
    label: Submission Environment
    widget: select
    help : Select desired submission environment.
    cacheable: false
    options:
      - [
          "Basic Modules", "mod_basic",
          data-hide-load-commands: true,
          data-hide-sif-file: true
        ]
      - [
          "Advanced Modules", "mod_adv",
          data-hide-sif-file: true
        ]
      - [
          "Container", "sif",
          data-hide-load-commands: true
        ]
  load_commands:
    label: Setup Commands (bash syntax)
    help: |
      Enter additional additional environment setup commands. These commands are run before starting MATLAB.

      - Load, or manipulate module environment using `module`
        - Extensions will only find programs provided by the module system if you load the required modules here!
      - Run arbitrary commands or source a bash script.
    cacheable: false
    widget: text_area
    placeholder: |
      module load <software-name>
      source "$HOME/project_a/setup-env.sh"
  sif_file:
    label: Container File
    help: |
      Select an Apptainer/Singularity Container (.sif/.simg) that includes [code-server](https://github.com/coder/code-server) 4.6.0 or newer.
    cacheable: false
    data-filepicker: true
    data-target-file-type: files
    data-target-file-pattern: '(.simg|.sif)$'
    readonly: true
    required: true

In this case the default for the form is to not use a container, but when the user elects to use a container we want to ensure that the a sif file is selected before the form can be submitted.

Hey sorry for the delay. We often monitor the Get Help section, but we don’t look at this section so often.

In any case - i filed this ticket on github for this issue and have categorized it as a bug as it seems like that to me.

Hey I’m just getting around to this to patch it for 4.0.

I cannot however, replicate with the form you’ve given. From the MDN docs, you can’t use readonly with required.

Because a read-only field cannot be changed, required does 
not have any effect on inputs with the readonly attribute also specified.

Once I removed the readonly field it started to work as you’ve indicated.

That said - I think this is an issue of documentation more than anything. That is, if you use data-hide directives, you likely also need a data-set directive on the same field to set it to a correct value now that it’s hidden.

We (the developers or even the system at runtime) can’t make that determination for you. I mean I guess we could default to setting the value to an empty string or the string hidden when we hide stuff - but I think we (the developers/the system at runtime) has to be conservative here. Conservative in the sense that we shouldn’t be doing extra stuff like hiding AND setting all with one directive. It could just be very unexpected for someone to use data-hide-the-thing and then all the sudden the_thing has a strange value in it.

I’m updating the documentation for the same, but the recommendation will basically be this: whenever you use a data-hide directive, you likely need a data-set directive as well to set the form into a known state.

1 Like