Skip to content
This repository was archived by the owner on Oct 17, 2026. It is now read-only.
This repository was archived by the owner on Oct 17, 2026. It is now read-only.

Broken Validation when using React Elements for Messages #2

Open
Open
Broken Validation when using React Elements for Messages#2
Labels
enhancementNew feature or request

Description

@dairyisscary
dairyisscary
opened on Mar 15, 2023

Version Number

7.43.2

Codesandbox/Expo snack

n/a

Steps to reproduce

hello react-hook-form folks!

28cafa864b4a92b2d2f6ac8f5c5cb27722e38b3f removed the option to use react elements as validation messages. as a result internationalization libraries that use elements for translation of validation messages no longer work.

For example, with react-intl/formatjs:

<input type="text" {...form.register("name", { required: <FormattedMessage defaultMessage="this is required" /> })} />

most internationalization libraries (including formatjs) can produce strings but the element api is often more convenient, can use constant values, and doesn't require boilerplate to get things out of context

Expected behaviour

hopefully we can bring this back.

What browsers are you seeing the problem on?

No response

Relevant log output

No response

Code of Conduct

  • I agree to follow this project's Code of Conduct

Activity

  1. bluebill1049 commented on Mar 15, 2023

    @bluebill1049
    bluebill1049
    on Mar 15, 2023
    Member

    We actually only support string from the very beginning of V7, but the code was left there for awhile. Now that react hook form core is going to be framework agnostic, any react-specific code will need to be removed. Consider returning the string and using translation API if you can. eg

    { required: translate(test') }

// or 

{ required: 'test' }
translate(errors.test.message)
  2. bluebill1049
    added
    questionFurther information is requested
    on Mar 15, 2023

  3. dairyisscary commented on Mar 16, 2023

    @dairyisscary
    dairyisscary
    on Mar 16, 2023
    Author

    hey bill! thanks for getting back to me.

    can i convince you otherwise with any of these arguments?

    • how would I include html in a message? what if Iwanted this is <em>required</em>? strings cannot support this, can they?
    • I understand the idea of being framework agnostic but what if a framework doesn't use strings at all. I'm not sure this is the case today but solid js for example uses real DOM nodes, not vdom, so perhaps they might be using DOM textNodes, not strings. What if you just made isMessage part of the framework adapter instead of the core, since what a message can and cannot be is framework specific.

  4. bluebill1049 commented on Mar 16, 2023

    @bluebill1049
    bluebill1049
    on Mar 16, 2023
    Member

    I understand this is not going to work the best for you, and certainly answering your questions will only probably bubble up more. I am trying my best to answer here with a clear mind after a whole day of work. Yes, we can consider option two, but to be mindful, this is by design to only support string so users don't have to type assert. The typescript never supports React.ReactNode in the type definition and is included in the doc. It wouldn't be my priority to fix it out probably after the library core is published and officially used by hook form.

  5. dairyisscary commented on Mar 16, 2023

    @dairyisscary
    dairyisscary
    on Mar 16, 2023
    Author

    of course, bill! i hope i'm not being overwhelming haha (i know open source can be burnout-city).

    i'll close the issue and migrate all my messages to strings :)

  6. dairyisscary
    closed this as completedon Mar 16, 2023
  7. bluebill1049
    reopened this on Mar 16, 2023

  8. bluebill1049 commented on Mar 16, 2023

    @bluebill1049
    bluebill1049
    on Mar 16, 2023
    Member

    @dairyisscary let me work on this later, I am moving to the core. Once the core is ready, I will try to get this working. There are a few challenges because I can't just check its function or want to bring react as a dependency, but will try to find a workaround if you have any suggestions or solutions let me know as well.

  9. bluebill1049
    transferred this issue fromreact-hook-form/react-hook-formon Mar 16, 2023
  10. bluebill1049
    added
    enhancementNew feature or request
    and removed
    questionFurther information is requested
    on Mar 16, 2023

  11. lennerd commented on Apr 24, 2023

    @lennerd
    lennerd
    on Apr 24, 2023

    Hey @bluebill1049 any news on this? This is a blocker for us when updating to the latest react-hook-form version.

    We currently sometimes use async validations to load data from the server, for example to test for duplicates. When there is a duplicate we add a link to the other entity right inside the error message. This was super easy to do when returing JSX, but will be quite difficult via a simple string.

    Any suggestions to solve this with react-hook-form version 7?

  12. lennerd commented on Jun 28, 2023

    @lennerd
    lennerd
    on Jun 28, 2023

    @bluebill1049 any news on this? Thanks in advance!

  13. lennerd commented on Jul 11, 2023

    @lennerd
    lennerd
    on Jul 11, 2023

    @bluebill1049 we would like to update react-hook-form but are currently blocked by this bug. Any future plans or suggestions?

    It's also fine for us if you think that this feature will not be reimplemented into react-hook-form. In this case we will need to look for refactorings in our code base to reenable this future with newer versions.

  14. lennerd commented on Oct 31, 2023

    @lennerd
    lennerd
    on Oct 31, 2023

    @bluebill1049 any news? Like I said, a simple: "will not reimplement feature" is fine for us to be able to plan our next steps.

  15. rh-meowsa commented on May 7, 2024

    @rh-meowsa
    rh-meowsa
    on May 7, 2024

    We have multiple scenarios where we embed an anchor styled CTA button in the error message. Not sure why "react"-hook-form should be agnostic of react.

  16. ivdma commented on Aug 27, 2024

    @ivdma
    ivdma
    on Aug 27, 2024

    A bit late to the party, but shouldn't this change either be breaking and thus belong in a major release, or shouldn't there be some kind of warning that support for JSX will be removed? I am upgrading from 7.43.0 and the "feature" is removed in 7.43.2, which is weird.

    Maybe I missed the warning as we started using RHF from 7.8.8, but still it is weird for features to be removed in a patch release.

    What is the alternative nowadays? How do people provide HTML in the error-text?

  17. lennerd commented on Aug 27, 2024

    @lennerd
    lennerd
    on Aug 27, 2024

    We weren't able to finde a way to provide HTML and thus weren't able to update either. Still waiting for a response from @bluebill1049

  18. lennerd commented on Jan 8, 2025

    @lennerd
    lennerd
    on Jan 8, 2025

    New year, new try: @bluebill1049 any suggestions on how to work around this change?

  19. lennerd commented on Apr 8, 2025

    @lennerd
    lennerd
    on Apr 8, 2025

    @bluebill1049

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions