[Bug]: `setValue` does not trigger field re-validation

[david-arteaga]

Which packages are impacted?

• @rvf/react
• @rvf/remix
• @rvf/zod
• @rvf/yup
• zod-form-data

What version of these packages are you using?

"@rvf/react": "^6.1.1",
"@rvf/zod": "^6.0.1",
"zod": "^3.23.8"

Please provide a link to a minimal reproduction of the issue.

https://replit.com/@david_arteaga/rvf-set-value-validation-bug

Steps to Reproduce the Bug or Issue

Go to: https://replit.com/@david_arteaga/rvf-set-value-validation-bug

Make the field error appear some way.
Press press one of the buttons to use the form.setValue or field.setValue APIs to set the field's value.
The validation error doesn't go away.

Expected behavior

I expect a field error to go away after setting a valid value using form.setValue or field.setValue (and any other APIs to set the field's value)

Screenshots or Videos

No response

Platform

• OS: macOS
• Browser: Chrome

Additional context

No response

[airjp73]

Hi!

Not triggering validation is the intended behavior of this API. But it's really straightforward to validate manually.

form.setValue('myField', 'foo');
form.validate()

You could also use form.field('myField').onChange if you want to emulate the normal change behavior.

I hope that helps!

[david-arteaga]

yeah sorry I should have mentioned these things in the initial request.

• form.validate() makes it so all field errors are displayed, even for other un-touched fields in the same form
• calling form.field('fieldName').onChange directly only works for controlled inputs. It doesn't work for uncontrolled inputs (I imagine because reasonably that call doesn't then use the ref to set the value)

I think it's reasonable to have the API support directly setting a field's value and still have RVF validate that field's value. I've had to do this plenty of times before with fields that depend on other fields or for specific business rules.

I'm not sure there are many use cases to support directly changing a field's value and not have that change be taken into account by validation. This ultimately leads to state not being synced up between the form's values and the corresponding validation errors the library returns.

[airjp73]

form.validate() makes it so all field errors are displayed, even for other un-touched fields in the same form

Ooh yeah. I've been meaning to expose a validateField helper to cover this situation.

calling form.field('fieldName').onChange directly only works for controlled inputs. It doesn't work for uncontrolled inputs (I imagine because reasonably that call doesn't then use the ref to set the value)

Good point. I think that's still the right behavior for that API, but you're right it that doesn't solve your use-case the way I suggested it might.

I'm not sure there are many use cases to support directly changing a field's value and not have that change be taken into account by validation. This ultimately leads to state not being synced up between the form's values and the corresponding validation errors the library returns.

I definitely see where you're coming from, and it's something I might think on a bit.

I based the current behavior on react-hook-form's setValue, which also doesn't perform validations by default. In that case you can pass shouldValidate: true, but I didn't want to clutter the API with an extra option when you can just use the existing validation helpers.

I think there's value in low-level helpers that don't do any extra logic for you. For example, I'm not really sure if you would ever use setTouched on its own, but it's useful if you need to implement your own higher-level logic by combining multiple of these lower-level apis.

[Mihai-github]

Hi ... I don't know if I'm doing something wrong but implementing the RVF library is extremely hard for some reason and it's not the first library I've used to make form validation but there is something maybe I don't understand here:

In this example, i want to control the review value using the setValue. I can see using form.value() the value gets updated but the validation done with zod is not getting updated, the error still persists even though it should have disappeared ... WHY?

<textarea
  id="review"
  color="black"
  className={"inputBox"}
  inputMode="text"
  onChange={(event) => {
    form.setValue("review", event.target.value);
  }}
  // {...form.getInputProps("review")}
/>

In this simple example doing the form.setValue makes the validation not getting updated but doing the {...form.getInputProps("review")} works .... I have even tried to do it after the form.setValue also form. validate and nothing

[airjp73]

Hi @Mihai-github!

Could you provide a more complete example of what you're trying to do? Calling setValue in a change handler shouldn't be necessary for validation or for form.value to work.