[BUG] - Form validation errors not displaying via the validationErrors

[kofeinstyle]

HeroUI Version

@heroui/[email protected]

Describe the bug

I am trying to use the example from the documentation (https://www.heroui.com/docs/components/form#validation), but no errors are displayed on the input field, and the form does not respond to the presence of errors.

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

'use client'

import { Input } from '@heroui/input'
import { Button } from '@heroui/button'
import { Form } from '@heroui/form'
import { useState } from 'react'


function callServer() {
  return {
    errors: {
      username: 'Sorry, this username is taken.',
    },
  }
}

export function LoginForm() {
  const [errors, setErrors] = useState({})

  const onSubmit = e => {
    e.preventDefault()
    const data = Object.fromEntries(new FormData(e.currentTarget))

    if (!data.username) {
      setErrors({ username: 'Username is required' })
      return
    }

    const result = callServer()
    setErrors(result.errors)
  }

  return (
    <Form
      className="w-full max-w-xs flex flex-col gap-3"
      validationErrors={errors}
      onSubmit={onSubmit}
    >
      <Input
        label="Username"
        labelPlacement="outside"
        name="username"
        placeholder="Enter your username"
      />
      <Button type="submit" variant="flat">
        Submit
      </Button>
    </Form>
  )
}

Expected behavior

Highlight errors on input field

Screenshots or Videos

No response

Operating System Version

macOS

Browser

Chrome

[linear]

ENG-1960 [BUG] - Form validation errors not displaying via the validationErrors

[wingkwong]

Couldn't reproduce the issue. Please provide a sandbox instead.

[kofeinstyle]

Couldn't reproduce the issue. Please provide a sandbox instead.

Ok. Let me some time for it

[kofeinstyle]

Couldn't reproduce the issue. Please provide a sandbox instead.

You can check it - sandbox

I copied the package.json from my test project into a sandbox because I suspect the issue lies with the @heroui dependencies. I’ve made many attempts to reproduce the issue, deleting node_modules and the lock file, then reinstalling the dependencies.

As a result, sometimes the form and input errors work correctly.

Additionally, I noticed that the fewer component dependencies I include in package.json, the more often the form works correctly.

Possibly, the issue is with a library used internally by heroui as one of its dependencies.

[jcdk]

I'm having the same issue and my code and dependencies appear to be same as @kofeinstyle. Just adding that validationBehavior="native" for client side validation consistently works, but setting validationErrors does not.

As an override, I can set isInvalid and errorMessage on heroui Input components, but then I lose the client side validation. Is there a way to get the controlled values from the Form component?

 isInvalid={!!errors['email']}
 errorMessage={errors['email']}