Consistent method for "are all fields touched / filled out" state

[colindjk]

Currently I'm trying to figure out if there's a consistent way to check if all fields have been updated.

The UX I'm looking for is similar to what's achieved with setting validation to mode: "onBlur", such as in this code sandbox.

However what I would like to see is:

• Is there a way to have the submit button become active once a user has provided input to all elements.

One solution that I was considering was having validation mode instead be set to onChange, and disabling only when errors with required were found in the list of errors (since ideally hitting submit triggers validation errors like "Invalid email" etc.).

Concerns with that being:

• The performance implications of validating on every change
• We still would like to hide errors until submit button is pressed -> we would need to keep track of this separately from the core react-hook-form library :/.

[bluebill1049]

Currently I'm trying to figure out if there's a consistent way to check if all fields have been updated.

is dirtyFields valid use case for such?

[Amir-Kermanshahani]

No, it provides if single fields are dirty or not, it doesn't provider such information about the whole form

[BryanFonseca]

If you need to check that all the inputs from the form are dirty I think you could do something like the following:

const {
    formState: { dirtyFields },
    getValues,
} = useForm<IFormShape>();

const inputFields = Object.keys(getValues());
const isEveryInputDirty = inputFields.reduce((prev, curr) => {
    const isFieldDirty = dirtyFields[curr as keyof IFormShape];
    if (!isFieldDirty) return false;
    return prev && isFieldDirty;
}, true);