NuxtN
Nuxt16mo ago
1 reply
Gregor

validate nuxtui radio buttons with zod

Hi,

I do not get an error message for my radio buttons when I click on submit. Text input works as expected.

import { z } from "zod";

const formState = ref({
    firstName: "",
    shipping: "",
  });
 const schema = z.object({
    firstName: z.string().min(1, { message: "First Name is required" }),
    shipping: z.enum(["standard", "express"], {
      required_error: "You must select an option.",
    }),
  });
 const shippingVariants = ref([
    {
      value: "standard",
      label: "Standard",
    },
    {
      value: "express",
      label: "Express",
    },
  ]);

<UForm
  ref="form"
  :state="formState"
  :schema="schema"
  @submit="onSubmit"
>
  <UFormGroup label="First Name" required name="firstName">
    <UInput v-model="firstName" />
  </UFormGroup>
  <URadioGroup
    v-model="formState.shipping"
    legend="Select a shipping method"
    :options="shippingVariants"
  />
  <UButton type="submit">Review Summery</UButton>
</UForm>

I got it worked with wrapping a formgroup around it, but then only the error message appears, but the radiobuttons do not get an error styling like an input text field
<UFormGroup
      required
      name="shipping"
    >
      <template #default>
 <URadioGroup
    v-model="formState.shipping"
    legend="Select a shipping method"
    :options="shippingVariants"
  />
</UFormGroup>

any ideas how I can get also error styling on inputs?

best,
gregor
Was this page helpful?