Form level Validation pre-submit in addition to field level validation

[chrishj59]

When validating a form it is often necessary to validate the individual fields but in addition, it is often necessary to validate fields in relation to each other.
For example, when creating a user account it is necessary to validate both the password and repeat passwords are entered and match complexity. This is handled well using the register validation methods.

When each field has been entered it is also necessary to check the values of both are the same. This may also apply where the form has a total quantity field and a quality for each line included in the form. Here is it necessary to check the total of the lines equals the summary total.

Describe the solution you'd like
A new hook should be provided to apply a final check on the whole form activated as a pre-submit step. If an error is returned the submit should not be fired. - Similar to the field validation.

Describe alternatives you've considered
I have attempted to have a validation set in the register each field and call the field validation as part of setValue - Final parameter and then to have a form validation resolver with a mode 'onSubmit'. The field validators are not called only the validation resolver.

[bluebill1049]

hi @chrishj59,

yes I agree, have you got a chance to take a look schema validation?
https://react-hook-form.com/api#validationSchema

and perhaps you can write your own logic with validation resolved as well:
https://react-hook-form.com/api#validationResolver

let me know your thoughts.

[tafelito]

@bluebill1049 is it possible to mix the yup schema validation with a custom validation. I tried using the resolver but it overrides the schema validation. I saw you are working on a resolvers package for v6 but is itt possible to have this for v5?

So pretty much what I need is to add some custom logic to add some errors on top of the errors I have that comes from the validation schema

[bluebill1049]

why not using resolver to have your own logic combined with schema? i did try to combine build-in with schema, it's a nightmare for me.

[tafelito]

Yes that's what I'm doing now but then I have to handle the errot handling when yup validation failes my self instead of reusing whatever you are doing internally. The api you use to parse the errors is not public and seems like a lot of duplication.

Also I did something different and now the path of the errors is 'super.nested.field' for a nested field instead of being an object

[jacknewberry]

Hi @chrishj59 , @bluebill1049 , @tafelito

I am also looking for this functionality - whole-form validation in addition to per-field.

Options I have considered:

• resolver

  • this seems to be called instead of per-field validation rather than in addition.
  • a solution could be for RHF to call resolver even when there is per-field validation
  • I think that the schema option also has these limitations.

• handleSubmit(submitHandler, submitErrorHandler)

  • submitHandler can use setError
  • this validation will only happen if all per-field validation passes, which is ok, but not optimal
    • submitErrorHandler could be used to do additional validation even if there are errors
    • however submitErrorHandler does not receive the values

• calling a function to perform whole-form-validation from within the validate method of each individual field

  • I think this can work, but it seems inefficient to be adding additional whole-form logic to each field
  • when submission occurs, I think this will be called once for every field on the form

Options for RHF:

• When a resolver is provided, call it in addition to per-field validation.
• Add a new option validate or validator which is called whenever validation occurs.

[bluebill1049]

When a resolver is provided, call it in addition to per-field validation.

what do you mean by that? resolver is called on form level.

[jacknewberry]

  // validator (resolver) for the whole form:
  const wholeformValidator = () => {/* ... */}
  
  // validator for a specific field:
  const someNameFieldValidator = () => {/* ... */}
  
  const { register, handleSubmit } = useForm({
    resolver: wholeFormValidator,
  })
  
  return(<form onSubmit={handleSubmit(submitHandler)}>
    <input type="hidden" {...register("someName", { validate: someNameFieldValidator })} />
  </form>)

someNameFieldValidator is what I mean by "per-field validation".

If resolver is provided, then someNameFieldValidator seems to be ignored.

[bluebill1049]

yes, it's either resolver or build-in validation. This is by design, so you are either have a single place for your validation or leverage the build in which associated with fields.

[jacknewberry]

Yes, I agree there are times when it is easier to have validation associated with the fields, and probably use-cases where a single place is better.

There are also times when a combination of both are useful.

I don't think that enabling both would make it any different for the people who need one or the other.

[HenriVesala]

I would also like option for enabling both.
We have a lot of existing complex validation logic in our fields that can be added to fields validation by different props in component.
Sometimes we need to do resolver validation to ensure that we have either A or B field filled in form.
This also means that when we have to use resolver validation we also need to write complex validation logic for individual fields there that bloats our codebase for no good reason.

It wold be lovely to have option for to have both running