Execute submit on every valid change (onSubmit when valid input after onChange)

[bennettdams]

Maybe this is easy, but I'm new to RHF.

I have a simple text input that I want to use to filter a list.
It is a small list, so I want to filter the list on every change instead of e.g. having a dedicated button to submit or on blur.

What is the configuration needed to do this?

I found this StackOverflow post, but I'm really unsatisfied with the answers, because I don't want to use watch, trigger etc. myself, as the chances to make errors are higher.

Maybe I'm thinking in the wrong direction, but instead of handling that myself with trigger etc., I would rather want to use handleSubmit (and my own onSubmit function), because it already does the validation. onSubmit should only be executed when the input is valid, so I can rely on that value to filter my list.
I just don't know which combination of useForm's mode or reValidateMode is working for my use case.

Can anyone help?

Here's a CodeSandbox

...and the code for reference:

import React from "react";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import * as z from "zod";

type InputProps = React.ComponentPropsWithoutRef<"input">;

export const Input = React.forwardRef<HTMLInputElement, InputProps>(
  function Input(props, ref) {
    return (
      <input
        type="text"
        className="inline-block bg-blue-100 h-12 mt-10 shadow-sm hover:shadow-md rounded-md disabled:bg-gray-100 disabled:cursor-not-allowed"
        {...props}
        ref={ref}
      />
    );
  }
);

function Form(props: React.ComponentPropsWithoutRef<"form">): JSX.Element {
  return (
    <form className="w-full inline-block" {...props}>
      {props.children}
    </form>
  );
}

const schema = z.object({
  username: z.string().min(1, "name required")
});
type Schema = z.infer<typeof schema>;

export default function App() {
  const {
    register,
    handleSubmit,
    formState: { errors }
  } = useForm<Schema>({
    mode: "all",
    reValidateMode: "onSubmit",
    resolver: zodResolver(schema)
  });

  function onSubmit(data: Schema) {
    console.log("Submitted!", data);
  }

  return (
    <div className="App">
      <h3>React Hook Form example</h3>
      <Form onSubmit={handleSubmit(onSubmit)}>
        <div>
          <Input
            placeholder="Username..."
            id="username"
            autoComplete="off"
            {...register("username")}
          />
          <p>{errors?.username && errors.username.message}</p>
        </div>
      </Form>
    </div>
  );
}

[JamesWong1999]

watch(); // trigger each onChange

if (formState.isValid) {
  onSubmit() // submit with render when form is valid
}

[bennettdams]

That does not work, because isValid is one render cycle behind. So an input that changes a form state from valid to invalid will still be submitted.

const data = watch();

const onSubmit = (data: Schema) => console.log("onSubmit data", data);

useEffect(() => {
  console.log("isValid", isValid);
  if (isValid) onSubmit(data);
}, [data, isValid]);

With this setup, if you first input a character (like "a") and then remove the character (so the input is an empty string again), will console log the following:

As you can see, the empty string is still submitted, even though my Zod schema does not allow an empty string. That's because isValid is one render cycle behind.

[bluebill1049]

Not sure if this will solve your problem: https://codesandbox.io/s/quiet-pine-chfmz?file=/src/App.tsx

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

type FormValues = {
  firstName: string;
};

let renderCount = 0;

export default function App() {
  const {
    register,
    handleSubmit,
    watch,
    formState,
    formState: { isValidating }
  } = useForm<FormValues>({
    mode: "onChange"
  });
  const onSubmit = (data: FormValues) => console.log(data);
  renderCount++;

  const data = watch();

  React.useEffect(() => {
    if (formState.isValid && !isValidating) {
      console.log(data);
    }
  }, [formState, data, isValidating]);

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

      <form onSubmit={handleSubmit(onSubmit)}>
        <input
          {...register("firstName", { required: true })}
          placeholder="First Name"
        />
        <input type="submit" />
      </form>
    </div>
  );
}

[TempleClause]

@bennettdams

I tried your CodeSandbox and for input type text it works well. But for some reason it doesn't work for input type checkbox.
See this example:

https://codesandbox.io/s/morning-surf-4c7qrg?file=/src/App.tsx

Any ideas why?

Thanks!

[k-zakhariy]

This is working perfectly for me https://codesandbox.io/s/react-hook-form-auto-save-xgulp?file=/src/AutoSave.tsx

[musjj]

With onChange, I'm getting the previous value instead of the latest changed one. Anyone else having this issue? I'm using a zod validator, with a few select fields.

[aleksa-poly-ai]

@musjj It's related to the micro queue and const/let/var scope. You should use ref to get current (real) value of the variable.

[CerealeZ]

It would be great to have the possibility of adding a callback function in the hook options so that at the time of the change, this function is called without the need to perform renderings in the component.

[craigmcc]

Is there a reason why you have a form value firstName (as a string) and are trying to render it in a checkbox? I use boolean form values for that kind of thing.

[TempleClause]

Ah that was just a copy paste error ;-) But changing it to a boolean doesn't fix it either 🤷