Progressive enhancement
A server-rendered form must still enforce HTML constraints before JavaScript loads.
Conform · Pipe
defaultNoValidate
defaultNoValidate controls native constraint validation before the form is hydrated. It defaults to true; the returned form.noValidate indicates whether browser validation is disabled after hydration.
How it works
Set defaultNoValidate to false when the form should not remain JavaScript-only after hydration. With the default true, Conform initially enables native constraint validation before hydration, then the returned form metadata keeps browser validation disabled so JavaScript handles it.
Syntax
useForm({ defaultNoValidate?: boolean })Parameters
| Name | Type | Description |
|---|---|---|
defaultNoValidate | boolean | Whether to enable browser constraint validation before the DOM is hydrated. Defaults to true. |
Returns
The useForm return value includes form.noValidate, a boolean indicating whether the browser's default form validation is disabled.
Key points
- The option determines whether browser constraint validation is enabled during the period before hydration.
- If omitted,
defaultNoValidateis enabled by default. - With the returned default, JavaScript—not the browser's built-in validation UI—handles validation after hydration.
Common mistakes
- The option defaults to
true; setting it tofalsechanges the post-hydration form behavior. - The returned
noValidatevalue controls whether the browser's built-in form validation is disabled.
Example: Allow native validation after hydration
const [form] = useForm({
defaultNoValidate: false,
});
return <form {...getFormProps(form)} />;Disables the default browser validation behavior after hydration, allowing the browser to validate the form before hydration instead.
When to use it
JavaScript-managed validation
A form intentionally relies on Conform's client-side validation and error handling after hydration.
Interview questions
QWhat does defaultNoValidate control?
defaultNoValidate controls whether native constraint validation is enabled before the DOM is hydrated. Its default is true, so the browser can validate the form during the pre-hydration period.
Follow-up: What controls validation after hydration? The returned form metadata exposes noValidate; by default it is true, meaning JavaScript handles validation.
QHow do you disable the default behavior?
Set defaultNoValidate to false in the useForm options. This changes the initial constraint-validation behavior before hydration.
Follow-up: Why might this matter for progressive enhancement? Before hydration, the browser may need to enforce native constraints because JavaScript form behavior is not active yet.
QHow is the option related to form.noValidate?
defaultNoValidate is a useForm option, while form.noValidate is returned metadata used on the form element. The option affects pre-hydration behavior; the returned property indicates whether browser validation is disabled.
Follow-up: How can a form use the returned value? Spread the form props or set the form's noValidate attribute from the returned metadata.
Related
useFormnoValidategetFormProps