Required fields in conditional logic Payload 2

[sandstone991]

Suppose I have a fields schema like this

const x = {
    fields: [
        {
            name: 'type',
            type: 'select',
            label: 'Type',
            required: true,
            options: [
                { label: 'Cat', value: 'cat' },
                { label: 'Dog', value: 'dog' },
            ],
        },
        {
            type: 'group',
            admin: {
                condition: (data) => data.type === 'cat',
            },
            label: "Cats",
            fields: [
                {
                    name: "catName",
                    label: "Cat name",
                    required: true,
                    type: "text"
                }
            ]
        },
        {
            type: 'group',
            admin: {
                condition: (data) => data.type === 'dog',
            },
            label: "Dogs",
            fields: [
                {
                    name: "dogName",
                    label: "Dog name",
                    required: true,
                    type: "text"
                }
            ]
        },
    ],
}

Expected behavior for me:

When choosing cat through the select input, the dogName field is not required and doesn't give an error when validating.

Actual behavior:

The document doesn't get saved because it tells me that the dogName field is required.

If anyone can give me their thoughts on this I'd very grateful.

thank you.

[akhrarovsaid]

Hmm, this is a good question. In my eyes the correct solution here is to add a custom validate function to each. The idea is that you would check your condition, and if the type does not match you would return false.

[allthetime]

In the docs it says

Custom validation functions should return either true or a string representing the error message to display in API responses.

I'm a little confused how returning false solves this issue & what the (undocumented?) effect of returning false is. How does it disabled the required constraint in this case?

[akhrarovsaid]

Hey @allthetime,

If you were to return a literal false value from a custom validation function you would get a TS error. What I meant by the above was to return a value that constitutes a failed validation. In the scope of a validation function, it would be some string message reasoning why it failed.

The correct signature for the value returned should be string | true | Promise<string | true>.

[allthetime]

but why does a failed validation short circuit "required", wouldn't it just add another layer of not being able to save the edit/creation?

[akhrarovsaid]

Hey @allthetime,

The check for required is part of the default validation suite, not another layer on top. In the validation step, the default behavior checks for if required is configured and, if so, then the value must also exist. By defining your own validation function and omitting a check for required, you bypass it. This gives you complete control of how to handle edge-cases such as OP had.

To see this in practice, have a look at the default text validation function (which you can import for your own use btw). Every field has one of these that come out-of-the-box.

[allthetime]

Thank you so much for taking the time to explain. This is very helpful for me and what I'm building right now.

Have a great day/night/etc.

[sandstone991]

Hi @akhrarovsaid,

Thanks for your reply.

I feel like "required" should be able to take a function so as not to lose the UI associated with the required element. But yes, using a custom validate function will work as expected.