Disable default this field is required behaviour...

[WingsDevelopment]

How do i disable default html message 'this field is required' and show error below the field?
Show this:

Instead of this:

So far I have a code for input field:

<Controller
            control={control}
            name="amount"
            render={({ field: { onChange, value } }) => (
              <Form.Control
                type="text"
                value={value ? value : ""}
                placeholder={t("Maximum")}
                {...(register("amount"), { required: true })}
                onChange={(e) => onChange(e.target.value)}
              />
            )}
          />

          {errors?.amount?.type === "required" && (
            <span className="validation-error">
              {t("This field is required")}
            </span>
          )}

[Moshyfawn]

Can you provide a simple codesandbox with the reproduction?

[WingsDevelopment]

https://codesandbox.io/s/fervent-sinoussi-mwsynb?file=/src/App.tsx

[WingsDevelopment]

Here is a codesandbox:
https://codesandbox.io/s/fervent-sinoussi-mwsynb?file=/src/App.tsx

[Moshyfawn]

Ah, it's the default behavior for RB, I believe.

You can disable the native HTML form validation by providing the noValidate attribute to your <Form /> component

[WingsDevelopment]

But then validation is disabled? Lets forget bootstrap for a second, I didn't wanna use bootstrap validation..
I've updated codesandbox with noValidate and I have empty errors object, why?
Can you check update?
https://codesandbox.io/s/fervent-sinoussi-mwsynb?file=/src/App.tsx:560-570

[WingsDevelopment]

I've removed bootstrap form and input field..

[Moshyfawn]

You are mixing both controlled and uncontrolled input APIs (Controller & register).

To provide validation rules to a controlled component, use rules prop on the <Controller /> component instead.

<Controller
  rules={{
    required: true
  }}
/>

See this code example

[WingsDevelopment]

Oh I see, now I understand. Thanks, I got it working with rules={{ required: true }} on Controller.