Right way to update value of form field after validation

[isopterix]

Hi, I am looking for the right way to update the form field value after the validation function successfully validated the original input. In my particular case I take a user input and want to validate it against a database which, if the validation query was successfully, will return both the field value together with an ID. Now I would like to replace the original field input value with the returned object. But I cannot get this to work. So far I tried by adding a setValue command just before I return true. But this does not seem to update the returned form "data" in time before the submit function is called. When I log the getValues output I see the field data is updated as expected. But the submit function data attribute will still throw the old value for the field in question. I am out of ideas how else to approach this...

[Moshyfawn]

"validation function" - you're talking about the custom validate callback on the input or the submission validation?

[isopterix]

I have it defined on the input validation... submit validation would be too late for the user feedback. There are multiple fields to independently validate and check against data contained in the DB.

Example:

<form className="flex flex-col gap-3.5" onSubmit={handleSubmit(_submit)}>
  <input
    type="text"
    {...register("trolly", {
      required: {
        value: true,
        message: "This field is required.",
      },
      validate: async (value) => {
        const validationQueryResult = await client.query({
          query: Q_VALIDATE_TROLLY,
          variables: { name: value },
        });
        const trolly = validationQueryResult.data?.trolly;
        if (trolly) {
          setValue("trolly", trolly);
          return true;
        } else {
          return `Trolly with ID "${value}" is unknown, please try again.`;
        }
      }
    })}
  />
  ;
</form>;

The "data" attribute of the _submit function keeps spitting out the old data.

[Moshyfawn]

Alright, I've already started throwing together a simple CSB, so there's no "Trolly" theme there, hope it's alright :P
I wasn't able to reproduce your issue in this CSB. You can take a look and tweak if anything's wrong with how I tried to simulate the use-case.

P.S. keep in mind that I don't have onChange debounce setup or any proper logic. Just tried to replicate your case

validation-set-value.mp4

[isopterix]

Wow, thank you very much for your effort and help here! Taking a look right now...

[isopterix]

Ok, your example solved my issue. As you can see in my script example I am lazily replacing the whole "trolly" object entirely whereas you have "just" added the "id" attribute to it. If I follow your example it works. If I assign "trolly" an object e.g. {name:"Test1", id:999} it fails... Is it just me or is this a bit strange?

[isopterix]

Maybe a newbie error but if I replace in your CSB line 81 with setValue("user", res); - like what I did in my case - it fails. Same if I try with setValue("user", {...res});

[ovchingus]

Hi, looks like with actual version 7.52.0 and react 18 issue is still exist. Here is the same sandbox @Moshyfawn posted, with actual versions of react, react-dom and react-hook-form.

On the first submit I got id: undefined, then I keep receiving old value