Builder example on main page does not work as described

[EugeneDraitsev]

Version Number

v7

Codesandbox/Expo snack

https://codesandbox.io/s/spring-microservice-yn31u9

Steps to reproduce

1. Go to 'form-builder'
2. Copy default builder code:

import React from 'react';
import { useForm } from 'react-hook-form';

export default function App() {
  const { register, handleSubmit, formState: { errors } } = useForm();
  const onSubmit = data => console.log(data);
  console.log(errors);
  
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input type="text" placeholder="First name" {...register("First name", {required: true, maxLength: 80})} />
      <input type="text" placeholder="Last name" {...register("Last name", {required: true, maxLength: 100})} />
      <input type="text" placeholder="Email" {...register("Email", {required: true, pattern: /^\S+@\S+$/i})} />
      <input type="tel" placeholder="Mobile number" {...register("Mobile number", {required: true, minLength: 6, maxLength: 12})} />
      <select {...register("Title", { required: true })}>
        <option value="Mr">Mr</option>
        <option value="Mrs">Mrs</option>
        <option value="Miss">Miss</option>
        <option value="Dr">Dr</option>
      </select>

      <input {...register("Developer", { required: true })} type="radio" value="Yes" />
      <input {...register("Developer", { required: true })} type="radio" value="No" />

      <input type="submit" />
    </form>
  );
}

3. Past it to any React project and check console logs https://codesandbox.io/s/spring-microservice-yn31u9

4. There are no any error logs before I click submit

Expected behaviour

I see the errors for "Mobile Number" field before I click submit as it shows in live demo of builder:

What browsers are you seeing the problem on?

Chrome

Relevant log output

No response

Code of Conduct

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

[getTobiasNielsen]

This isn't a bug. Because you submitted the form once, it's now in reValidateMode, so it triggers validation on every change.

See https://react-hook-form.com/api/useform for mode and reValidateMode

[EugeneDraitsev]

@getTobiasNielsen I would say this is an unclear documentation example. How do I know that reValidateMode: onChange is enabled in the demo? When I copy the code example I expect to see exactly the same behavioras shown in the demo, but I got different one without any explanations. It would be great to add reValidateMode: onChange to the demo code to add more clarity.

[bluebill1049]

there is a whole section in the doc that describes this behavior: https://react-hook-form.com/api/useform It's a form builder demo on the home page and you are in better hands when it refers to the actual doc.

[EugeneDraitsev]

I understand that there is whole section in the doc about reValidateMode

My point is only about inconsistency between demo and code example:

When I click edit button and see the code:

I expect that this code will work the same, as demo where I clicked on the "edit" button. But for some reason this code doesn't have reValidateMode: onChange and behaves differently than the demonstrated behavior.

[getTobiasNielsen]

~~reValidateMode: onChange Is the default behavior, so it doesn't have to be added as an argument, unless you what something different.~~

Yeah, I think because I used the firstname field to test your issue, that it didn't trigger, made me think, you had already submitted once. (adding anything to the default forms firstname field, didn't trigger because it's required, so adding anything is correct, and doesn't cause an input error)

There is def, something funky with the builder rn.

[getTobiasNielsen]

I assume this must be the issue. Maybe' it's better to add this mode to the code generated? https://github.com/react-hook-form/documentation/blob/414ffbf5e9f1f80b4cbfe7050f8f0a13cca8babe/src/components/Form.tsx#L43-L45

Also, the email input seemed a little strange, wasn't even able to enter it, anyone else?

[EugeneDraitsev]

yeah, with mode: "onChange", it works the same as in the demo. It would be great to add it to generated code