Validates a field with a value of undefined

[sigridchen]

I wanted to thank you in advance for such a great package, much easier to use than similar packages!

Consider the following:

enum GENDER {
  FEMALE,
  MALE,
  OTHER,
}

const genderOptions = computed(() => [
  {
    value: GENDER.FEMALE,
    label: 'Female',
  },
  {
    value: GENDER.MALE,
    label: 'Male',
  },
  {
    value: GENDER.OTHER,
    label: 'Other',
  },
]);

const valibotSchema = v.object({
  email: v.string([v.email()]),
  password: v.string([v.minLength(8)]),
  gender: v.enum_(GENDER),
});

type InitialValues = v.Output<typeof valibotSchema>;

const { handleSubmit } = useForm<InitialValues>({
  initialValues: {
    email: '',
    password: '',
    gender: GENDER.FEMALE
  },
  reValidateMode: 'input',
  validate: valibotResolver(valibotSchema),
  onSubmit(data) {
    console.log(data);
  },
});

I'm planning to make a custom select component, but I'm having a hard time figuring out how to set the initial value to undefined in order to display the "Please select" text, while keeping the required validation of the field. I am planning to use the following method:

const valibotSchema = v.object({
  email: v.string([v.email()]),
  password: v.string([v.minLength(8)]),
  gender: v.enum_(GENDER),
});

type Override<T, U> = Omit<T, keyof U> & U;

type InitialValues = Override<v.Output<typeof valibotSchema>, { gender?: GENDER }>;

const { handleSubmit } = useForm<InitialValues>({
  initialValues: {
    email: '',
    password: '',
    gender: undefined
  },
  reValidateMode: 'input',
  validate: valibotResolver(valibotSchema),
  onSubmit(data) {
    console.log(data);
  },
});

This does work, but there is the problem that the error state does not change immediately when options are changed, and the error state change is only responded to when other fields are changed.

Is there a way to set the initial value to undefined while maintaining the behavior of the validation enum? Thank you for your help!

[Mini-ghost]

Thank you for your feedback. I would like to understand more clearly how your custom component is designed so I can better assist you in identifying and solving the issue.

It would be great if you could provide a minimal reproducible example. I tried to create one based on your description, which you can fork and modify to demonstrate the difficulties you are encountering.

https://stackblitz.com/edit/vitejs-vite-axcw2g?file=src/App.vue