Replies: 2 comments
-
Correct.
Depending on your target users, the validation attributes also play an important role in accessibility. (e.g. as a hint to screen reader users) |
Beta Was this translation helpful? Give feedback.
-
Perfect. And the accessibility reason makes sense, too! Thank you. |
Beta Was this translation helpful? Give feedback.
-
I'm a fan of the work that's happening with Conform. I'm trying to make sure I have a grasp on the API. I see constraint used and referred to in the docs, but didn't understand exactly what it was doing. I think I have the right idea now, but I'd appreciate confirmation, or corrections if I'm wrong.
The useForm hook includes an optional constraint option, which works in conjunction with the getZodConstraint or getYupConstraint functions to generate the following field attributes:
And then attach them to the field in question.
So, if I have a schema like this:
And use this useForm hook:
Then my generated html tag for password will include
<input name="password" required minlength="8" maxlength="20" ... />
However, this doesn't have a ton of effect in most use cases. By default, a form with
{...getFormProps(form)}
will have the novalidate attribute, which means the HTML tags won't be used for validation. And even if I manually turn off the novalidate tag with the hook update here:Conform will still switch to novalidate once Javascript loads. This means that the constraint parameter has a pretty narrow purpose: it enables native HTML validation if the developer sets the defaultNoValidate option to false and the user doesn't have Javascript or somehow fails to load the Remix bundle.
Is that correct? It makes perfect sense -- let's utilize the power of validating with Zod/Yup and Javascript where we can, and only fall back to built-in validation as a last resort. But it also seems like if I leave out the constraint, it's not going to matter most of the time.
Am I missing any key reasons to use the constraint parameter, or is it safe to ignore most of the time?
Beta Was this translation helpful? Give feedback.
All reactions