Nuxt•2w ago

Make number inputs not required

I have an optional number input for a calendar event ID. If you begin typing in the calendar event ID input, and then delete everything in it and stop, Nuxt UI will complain that the input is required. Even if you set required = false on the input, Nuxt UI will continue complaining. Is there a way I can make it not complaint and make it understand that the input is totally optional?

2 Replies

kapa.ai•2w ago

Hi @Eternal. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To make a number input optional in a Nuxt UI form, you need to ensure that your validation logic (either via the schema or the custom validate function) does not require the field when it is empty. Setting required=false on the input component itself only affects the native HTML validation and the UI, but Nuxt UI’s form validation is controlled by the schema or the custom validation function you provide to the <UForm> component. If your schema or validation function treats an empty value as invalid, the field will still be considered required. How to make a number input optional: - If you are using a custom validate function, make sure it does not push an error for the field when it is empty:

const validate = (state: any): FormError[] => {
  const errors = []
  // Only validate eventId if it is not empty
  if (state.eventId !== undefined && state.eventId !== null && state.eventId !== '') {
    // Add your validation logic for eventId here, e.g. check if it's a number
    if (isNaN(Number(state.eventId))) {
      errors.push({ name: 'eventId', message: 'Must be a number' })
    }
  }
  // ...other validations
  return errors
}

const validate = (state: any): FormError[] => {
  const errors = []
  // Only validate eventId if it is not empty
  if (state.eventId !== undefined && state.eventId !== null && state.eventId !== '') {
    // Add your validation logic for eventId here, e.g. check if it's a number
    if (isNaN(Number(state.eventId))) {
      errors.push({ name: 'eventId', message: 'Must be a number' })
    }
  }
  // ...other validations
  return errors
}

This way, if the input is empty, no error will be shown, making it optional in the form validation logic Custom Validation. - If you are using a schema (e.g., with Zod, Yup, etc.), ensure the schema marks the field as optional, not required. For example, with Zod:

import * as z from 'zod'

const schema = z.object({
  eventId: z.number().optional(),
  // ...other fields
})

import * as z from 'zod'

const schema = z.object({
  eventId: z.number().optional(),
  // ...other fields
})

This will allow the field to be empty without triggering a validation error. Summary:
The key is to ensure your validation logic (schema or function) treats the field as optional. Setting required=false on the input alone is not enough, as the form validation is handled separately Custom Validation. If you follow this approach, Nuxt UI will not complain about the field being empty. If you are still seeing errors, double-check your validation logic or schema definition. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

<@705244213414985758> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

Make number inputs not required

Did you find this page helpful?