Custom Validation: Field is not highlighted in red

[jasonkw9]

Hi there, I have some issue with the custom validation during data creation. Firstly, I will explain what's my custom validation, it is basically checking the Array field type and prompt error if there are duplicate selected Outlet. As you can see in the screenshot, I have selected both "Outlet Pricing 01" and "Outlet Pricing 02" with the same option of "Outlet 1" and the error does prompt out at the bottom of the page. However, I was hoping the field itself can be highlighted as well.

Here's my code for the custom validation:

{
            name: 'outletPricing',
            type: 'array',
            label: 'Outlet Pricing',
            fields: [
                {
                    name: 'outlet',
                    type: 'relationship',
                    relationTo: 'outlets',
                    required: true,
                    validate: (val, args) => {
                        let isDuplicate = []
                        if (Array.isArray(args.data.outletPricing)) {
                            isDuplicate = args.data.outletPricing.filter((v) => v.outlet === val)

                        }
                        if (isDuplicate.length > 1) {
                            return "Error"
                        }
                        return true
                    },
                },
                {
                    name: 'price',
                    type: 'number',
                    required: true
                }
            ]
        }

[DanRibbens]

This is strange, I don't know why you woudln't see a validation error on those fields with the code you've shared.

I did a quick test that copies your example pretty close and I see the errors okay. What browser are you on?

Here is my attempt to reproduce using a relationship with a validation method on it inside of an array (thought it would be related to the nesting somehow).

Do you see the react-select--error class added to the react-select div?

Here are my fields inside an array I used to test with:

{
  name: 'relates',
  type: 'relationship',
  relationTo: 'text-fields',
  validate: (value: string, args: ValidateOptions<unknown, {passValidation}, unknown>): string | true => {
    return args.siblingData.passValidation || 'Error';
  },
},
{
  name: 'passValidation',
  type: 'checkbox',
},

[jasonkw9]

Hi @DanRibbens , I am using Safari browser and I don't see the react-select--error class append to the div. I have the same thought that it would be related to the array nesting. Let me try to figure out