required attribute not automatically applied?

[TylerAPfledderer]

Hey all!

I have not seen a discussion already about this. If there is one, please refer me to that post! :)

This is two questions, with one related to use in the ChakraUI

1. When registering with the "required" property, why is the required attribute not automatically applied to the form field element? That would be troublesome in meeting accessibility standards if the required attribute didn't render true, yet the "required" property is applied, no?

2. To go along with the above, is there a way to access the required property from register to use on the ChakraUI FormControl component and its isRequired prop, so styling and the use of the required attribute can be applied through that?

[mmalomo]

I'm facing a similar problem. I need the attribute required for style proposals.
What I'm trying to do is wrap the register function with a helper funcion. It is very dirty but maybe could resolve this issue.

Another option is to use shouldUseNativeValidation (https://react-hook-form.com/api/useform) but it is not limited to required attribute.

@TylerAPfledderer Here is how i solved it:

import { RegisterOptions, UseFormRegister } from "react-hook-form"

const registerExt = (register: UseFormRegister<any>, fieldName: string, options: RegisterOptions) => {
  return { ...register(fieldName, options), required: !!options.required }
}

export default registerExt

Then, I use it like this:

{...registerExt(register, "user", {
  minLength: {
    value: 4,
    message: "Min len is 4"
  }, required: "User is required"
})}

[TylerAPfledderer]

Ooo I didn't think about a function wrapper! I'll give it a try. Thank you for sharing. 🚀

[BorysShulyak]

@TylerAPfledderer Here is exactly what you need - https://substack.com/profile/200733325-runespoor-engineering/note/c-66073144