How to add validation to the ListboxButton during the form submit? Native Form validation for the Headless ui

[Aravinda93]

Currently, when I submit the form I am unable to add validation to the ListBoxButton from headless UI. I am able to validate other simple fields such as Input text, Select Dropdown, etc but the headlessUI ListboxButton does not support form validation.

I am using the headless UI in my Nuxt 3 application as follows:

components/Dropdown.vue:

<template>
  <div class="flex-col items-center">
    <Listbox
      v-model="item"
      @update:modelValue="onItemChange"
      :required="required"
      :default-value="defaultSelectionRef"
    >
      {{ required }}
      <div class="relative z-10 w-full">
        <ListboxButton
          class="dropdown relative w-full pl-3 text-sm text-left sm:text-sm rounded h-12 border border-gray-300 dark:border-slate-700 dark:bg-slate-700 dark:hover:bg-slate-600"
          :required="required"
        >
          <span class="block truncate dark:text-white">{{ item.text }}</span>
          <span
            class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"
          >
            <Icon icon="fe:arrow-down" />
          </span>
        </ListboxButton>
        <transition
          leave-active-class="transition duration-100 ease-in"
          leave-from-class="opacity-100"
          leave-to-class="opacity-0"
        >
          <ListboxOptions
            class="absolute mt-1 w-full overflow-auto rounded shadow-md bg-white py-1 ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm dark:bg-slate-800 dark:text-white"
          >
            <ListboxOption
              v-slot="{ active }"
              v-for="option in options"
              :key="option.value"
              :value="option"
              as="template"
              :disabled="option.disabled"
            >
              <li
                :class="[
                  active ? 'bg-[#E5F0FC] dark:bg-slate-700' : '',
                  'relative select-none py-2 pl-4 pr-4 cursor-pointer',
                ]"
              >
                <span :class="option.class">{{ option.text }}</span>
              </li>
            </ListboxOption>
          </ListboxOptions>
        </transition>
      </div>
    </Listbox>
  </div>
</template>

<script setup>
import { Icon } from "@iconify/vue";
import {
  Listbox,
  ListboxButton,
  ListboxOptions,
  ListboxOption,
} from "@headlessui/vue";

const props = defineProps({
  defaultSelection: {
    type: Object, // default selected item in drop down
    required: false,
  },
  options: {
    type: Array, // array of options in the drop down
    required: true,
  },
  required: {
    type: Boolean, // condition based on which dropdown becomes required or not
    required: false,
  },
  modelValue: {
    type: [String, Number, Object, null], // name of the corresponding model for dropdown field
    required: false,
  },
});

const defaultSelectionRef = ref(props.modelValue);
const item = ref(defaultSelectionRef.value);

const emits = defineEmits(["onItemChange", "update:modelValue"]);

watch(defaultSelectionRef, (newValue) => {
  item.value = newValue;
});

// Emit the updated modelValue when the selectedOption changes
watchEffect(() => {
  emits("update:modelValue", item.value.value);
});

const onItemChange = () => {
  emits("onItemChange", props.model, item.value);
};
</script>

Its usage in pages/Test.vue:

<template>
  <form @submit.prevent="onSubmit">
    <div>
      <Dropdown
        v-model="type"
        :options="DefaultValues.eventTypes"
        :required="true"
      />
    </div>
    <div class="flex justify-center">
      <button type="submit">Submit</button>
    </div>
  </form>
</template>

<script setup>
import * as DefaultValues from "~/public/Static/DefaultValues"; //static values for dropdowns
const type = ref("");

const onSubmit = (event) => {
  console.log("Submitted");
};
</script>

<style>
</style>

Currently I am able to submit my form without even selecting any value for the Dropdown. How to prevent it? If I use the Select dropdown then everything works fine but I want to use the ListBoxButton from headless ui for better appearance of the application.