issue: errors returned from useFormState don't match errors returned from resolver prop

[dstaley]

Version Number

7.34.0

Codesandbox/Expo snack

https://codesandbox.io/s/silly-wave-qzs303?file=/src/App.tsx

Steps to reproduce

1. Go to provided CSB link
2. Check the first checkbox
3. Confirm that errors returns from resolver {} is logged in the console
4. Uncheck the first checkbox
5. Confirm that the error "At least one field must be selected" is displayed, along with the same error being displayed under the "errors returns from useFormState" heading.
6. Check either the second or third checkbox
7. Confirm that errors returns from resolver {} is logged in the console

Expected behaviour

The error message "At least one field must be selected" should not be displayed, and the "errors returns from useFormState" JSON should be an empty object.

I think this is due to the logic that determines when field has been updated, which prevents clearing errors from fields that haven't been touched since they were marked as in an error state. This is a legitimate performance optimization, so I wouldn't be surprised if this is working as intended. However, I couldn't find another way to express validation that accounts for the values of multiple fields (in this example, requiring at least one checkbox to be checked).

What browsers are you seeing the problem on?

Chrome

Relevant log output

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[bluebill1049]

react hook form return errors based on the input name, I had a looked at your example. I find it a bit difficult to follow. I made a simple codesandbox to demonstrate: https://codesandbox.io/s/objective-tdd-pnbfzr?file=/src/App.js

import { useForm } from "react-hook-form";
import Headers from "./Header";
import "./styles.css";

let renderCount = 0;

export default function App() {
  const {
    register,
    handleSubmit,
    formState: { errors }
  } = useForm({
    mode: "onChange",
    resolver: async (data, context, options) => {
      // do your logic here
      console.log(data);

      return {
        errors: {
          checkboxes: {
            type: "test",
            message: "this is incorrect"
          }
        }
      };
    }
  });
  const onSubmit = (data) => console.log(data);
  renderCount++;

  console.log(errors);

  return (
    <div>
      <Headers
        renderCount={renderCount}
        description="Performant, flexible and extensible forms with easy-to-use validation."
      />

      <form onSubmit={handleSubmit(onSubmit)}>
        <input {...register("checkboxes")} value="1" type="checkbox" />
        <input {...register("checkboxes")} value="2" type="checkbox" />
        <input type="submit" />
      </form>
    </div>
  );
}

[dstaley]

Apologies for the confusing example! In my example, each checkbox uses a different name, which results in a data object during submission that looks like the following:

{
  "A": true,
  "B": false,
  "C": false
}

Passing the same value to register (as in your example) produces a single "checkboxes" property with an array value.

What I'm trying to accomplish is validating that one of a given set of fields has a value, otherwise rendering an error. To be simple, I used checkboxes, but this could be a text field, checkbox, and a select field.

The behavior I think is a bug is that the errors value from useFormState doesn't match the errors that I return from my resolver function.

[ghivert]

I've encountered the same problem!
My resolver is dynamic, and it seems to perfectly work between validations, but the errors is not forwarded to the context.

[yss14]

I had the same issue. For me the problem was that I updated all form values via setValue(<value>, {shouldValidate: true,shouldTouch: true}). Problem is that only the updated field is validated and not the entire form. For that to happen one has to use the trigger() function afterwards :)

[niz-ib]

I had the same issue and I used the onchange() event handler of the registered field, and on an onChange of input field A, we do a trigger('B), trigger('C') and similar for the other two input fields. That way it seems to work as expected.