Password confirmation use case questions about react-use-form-state

[wsmd]

@uhoh-itsmaciek I know it has been a while since this issue was created, but I hope you can still find this helpful! :)

I think this is a valid use case. However, re-running the validation of another input programmatically is not currently possible because input validation requires a change/blur event, so it can only happen when the user interacts with an input. In fact, the validate exposes the event that triggers the validation as well.

react-use-form-state/src/useFormState.js

Lines 147 to 148 in 16df900

	if (isFunction(inputOptions.validate)) {
	const result = inputOptions.validate(value, values, e);

Introduce the ability to programmatically re-validating exiting inputs against their current values without an event is a breaking change. I'll take this into consideration in future major releases.

For the time being, as you know, the form state can be manually updated using dedicated methods such as setFieldError. I think useEffect is the prefect candidate here to achieve the fields "dependency" behavior you mentioned above without any code duplications or validate functions.

const Form = () => {
  const [formState, { password }] = useFormState();

  // ensures that both `password` and `confirm` are always in sync
  // whenever either one changes
  useEffect(() => {
    const { password, confirm } = formState.values;
    formState.setFieldError(
      'confirm',
      password !== confirm ? 'password must match' : undefined,
    );
  }, [formState.values.password, formState.values.confirm]);

  return (
    <form>
      <label>
        password: <input {...password('password')} />
      </label>
      <label>
        confirm password: <input {...password('confirm')} />
      </label>
    </form>
  );
};

[msakrejda]

Cool, thanks for responding. After some reflection, I think this is probably reasonable to keep the surface area of the library simple.