Remix Validated Form

v6 is coming!

Check out the RFC to get an early look or leave a comment.

(formId?: string) => FormContextValue

Returns information about the specified form.

FormContextValue

Record<string, string>

Contains all the validation errors in the form. The keys of the object are the field names and values are the error messages. If the form contains nested data, the field errors are not nested -- the keys of the object will be the same as the name passed to the input itself. (e.g. todos[1].title)

boolean

Whether or not the form valid.

(...fieldNames: string[]) => void

Clear the errors from all the specified fields.

() => void

Clears all the errors in the form.

(fieldName: string) => Promise<string | null>

Performs validation on the specified field and populates fieldErrors if there is an error. Also returns the error message if there is an error.

This helper will also update errors for other fields in the form depending on the touched state of those fields.

() => ValidationResult

Validates the whole form and updates fieldErrors. Also returns the ValidationResult object. This is the same object you get from validator.validate when validating on the server.

string | undefined

The value of the action prop passed to the ValidatedForm component. If no action prop is passed, this will be undefined.

string | undefined

The value of the subaction prop passed to the ValidatedForm component. If no subaction prop is passed, this will be undefined.

boolean

Whether or not the form is currently submitting.

boolean

Whether or not a submit has been attempted. This will be true after the first submit attempt, even if the form is invalid. This resets when the form resets.

Record<string, any>

The default values of the ValidatedForm component. In cases where the user has javascript disabled, this can sometimes be something other than what is passed into the ValidatedForm directly.

Record<string, boolean>

Contains all the touched fields. The keys of the object are the field names and values are whether or not the field has been touched. If a field has not been touched at all, the value will be undefined. If you set touched to false manually, then the value will be false.

(fieldName: string, touched: boolean) => void

Manually set the touched state of the specified field.

() => void

Resets the form, setting values back to default and clearing all errors and touched states..

Note: This same behavior can be achieved by calling reset on the form element itself or by clicking a button with type="reset"

() => void

Submits the form, running all validations first.

Note: This is equivalent to clicking a button element with type="submit" or calling formElement.submit().

() => FormData

Returns the current form values as a FormData object.