Nuxt•3mo ago

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>

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>

<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

1 Reply

GregorOP•3mo ago

ok got it work... is used the error message from template to set an error prop on my wrapper component for the radiobutton

<UFormGroup
  required
  name="shipping"
>
  <template #default="{ error }">
    <radioBox
      v-for="(shippingVariant, index) of shippingVariants"
      :option="shippingVariant"
      v-model="shipping"
      class="flex-1"
      :error="error !== undefined"
      :classes="classes(index)"
    >

<UFormGroup
  required
  name="shipping"
>
  <template #default="{ error }">
    <radioBox
      v-for="(shippingVariant, index) of shippingVariants"
      :option="shippingVariant"
      v-model="shipping"
      class="flex-1"
      :error="error !== undefined"
      :classes="classes(index)"
    >

and inside the radiobox I put some stylings on the ui prop, where the actual <URadio /> lives not sure if that is best practise but it works 😉

Gaming

Programming

validate nuxtui radio buttons with zod