I manage to clearErrors with onClick button , but not with onChange on input field , why ? Please help

[SSylvain1989]

Hello all , 👍
Thanks for taking the time to read this question .

I want to clear the error on a input when the value change so case senario is :
1/ i put a wrong email
2/ error say i want to submit a wrong email
3/ go back on the field and change the email , start typing , error still here until the email is valid .

I want to change the use case 3/ by
3/ go back on the field , start typing , error is clear and will be display after i submit the form again is the email is wrong again

So if i do this , error message is clear when i press the button

  const {register, handleSubmit, reset, clearErrors, formState: { errors,isSubmitting, isSubmitted, isSubmitSuccessful , isDirty}} = useForm({mode : 'onSubmit'});

          <div className="form-floating mb-3">
             <button
             type="button"
             onClick={() => clearErrors(["email"])}
            >
           Clear email error
            </button>
            <input
              name="email"
              type="email"
              className="form-control"
              id="floatingInput"
              placeholder={t('common:email_placeholder')}
              autoComplete="off"
              {...register("email", {
                // required: "You need do put an email",
                pattern: {
                  value: /^(([^<>()\[\]\\.,;:\s@"]+/,
                  message: t('common:email_error'),
                }
              })}
            />

if i do this , error message is still here and doesn't clear after i start typing again , but i call the same function , don't know why it doesn't work properly

  const {register, handleSubmit, reset, clearErrors, formState: { errors,isSubmitting, isSubmitted, isSubmitSuccessful , isDirty}} = useForm({mode : 'onSubmit'});

          <div className="form-floating mb-3">
             <button
            type="button"
            onClick={() => clearErrors(["email"])}
            >
           Clear email error
           </button>
            <input
              name="email"
              type="email"
              className="form-control"
              id="floatingInput"
              placeholder={t('common:email_placeholder')}
              autoComplete="off"
              onBlur={() => clearErrors(["email"])}
              onChange={() => clearErrors(["email"])}
              onInput={() => clearErrors(["email"])}
              {...register("email", {
                // required: "You need do put an email",
                pattern: {
                  value: /^(([^<>()\[\]\\.,;:\s@"]+/,
                  message: t('common:email_error'),
                }
              })}
            />

[bluebill1049]

it only temporarily marks your errors as an empty object and set form to valid.

https://react-hook-form.com/api/useform/clearerrors

clearErrors doesn't affect validation rules, if you need some conditional validation logic, it should be embedded in the validation rules, perhaps consider to use validate function

onBlur={() => clearErrors(["email"])}
onChange={() => clearErrors(["email"])}
onInput={() => clearErrors(["email"])}

code like above is conflicting with your validation.

[SSylvain1989]

@bluebill1049

i know clearErrors doesn't affect validation rules and i don't want too so it's perfect.
i have found a workaround with "onInput" but it's not the best move i think ...
So when i go on input again , error is clear and trigger again on next submit
i haven't found something call " validate " function in your documentation sorry :(
Thanks for your help

  const handleValueChange = (e) => {
    clearErrors(e.target.name);
  }; 

      <form
        name="email"
        id="viralLoopForm"
        onSubmit={handleSubmit(onSubmit)}
        onInput={handleValueChange}
        autoComplete="off"
        {...register("email", {
          pattern: {
            value: /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
            message: t('common:email_error'),
          }
        })}
      >
      

[bluebill1049]

https://react-hook-form.com/api/useform/register

for onChange

<inpu {...register('name', { onChange: () => {} })} />

they all live in the doc

[SSylvain1989]

ok thanks a lot i will check tomorrow , and post the answer here if i manage to do that

[SSylvain1989]

find a working solution @bluebill1049 many thanks for your help :) 👍
i share it here : https://codesandbox.io/s/cranky-ride-hm313?file=/src/App.js

[Saron760386]

JAGAJ