Form validation on autofill

[adamhinckley]

Is there a way to force validation on inputs when they are autofilled?

I have tried using onChange instead of onBlur, but it doesn't trigger either event when autofill is used.

This is the current setup:

useForm({
		mode: 'onBlur',
		reValidateMode: 'onChange',
		validationSchema: getValidationSchema()
})

I have tried to get it to work in Firefox and Chrome, but I have not found a way to get it to work.

[bluebill1049]

hmmm browser level autofill right?

[mcasteller]

Hi @bluebill1049 , I have same situation, at the time page loads browser adds some autofilled values in the form. But then I have no way to catch these updates. When component loads I've found formState.isDirty is set to false, though there are autocomplete values present. Same with getValues() it doesn't retrieves autofilled values.
And component (this one is from MaterialUI I guess) onChange does not get fired as well.

My goal is to take some actions based on autofilled values, but again so far I've found no way to get those at the time they are added into my form.

Any help would be appreciated.

Greetings,
Mariano.

[bluebill1049]

for browser autofill, there is nothing we can do about it. it's been done with security reason for example password.

[mcasteller]

it totally make sense, thanks @bluebill1049 for the clarification on this one

[jfulse]

My solution in this case was to use controlled inputs with useController

[purebase]

Hi jfulse, can you explain the usage of useController with a little example?

[Moshyfawn]

My solution in this case was to use controlled inputs with useController

Expanding on @jfulse's comment, you can custom-trigger the field's validation on browser's autofill by using useController hook to check if the input's value is different from it's default value but the input itself hasn't been touched.

I suppose you could do the same with the register method as well, tho, it would mean rerendering the whole form component by watching the fields in question top level. useController provides isolated to the fields rerender.

See this CSB for an example. Make sure to open the app in a new window because browser's autofill is funky with the way CSB does embedded apps.

browser-autofill-validation.mp4

Cc: @purebase

[purebase]

Thank you for your explanation. I will try as soon as possible. I'm already using the controller component in conjunction with mui text boxes.

[getTobiasNielsen]

@Moshyfawn I'm not entirely sure && !fieldState.isTouched helps in this instance, was it a mistake? As in some autofilling with just 1 field, might make you touch the field in the process, meaning the trigger isn't going to run in some cases.

[abrehamgezahegn]

If someone is still looking for a quick fix. Here is what worked for me

Add this before calling handleSubmit

// loop through your form names and call focus()
    formNames?.forEach((item) => {
      document.getElementsByName(item)[0].focus();
    });

@adamhinckley

[harveyconnor]

If you do that, what's the point of checking dirty fields.

[adyry]

I think the problem lies on your end, aren't you overriding onChange prop (which should come automatically from spreading register)? We've just had a same issue on our project and overridden onChange was the reason for fields not interacting on autofill.

[vch-a5sys]

Same for me, then I had to call the setValue of react-form in my onChange function.

import { TextField } from '@mui/material';

<TextField
  {...register('address')}
  label="My field"
  value={myState.address}
  onChange={(e) => {
    setMyState({ ...myState, address: e.target.value })
    // Without the next line, if the field is auto-filled by the browser, react-form does not know it
    setValue('address', e.target.value);
  }}
/>

[JosephG3001]

@vch-a5sys Can confirm this worked for me. Thanks!

[brunopavese]

Worked for me! Thanks a lot

[max-programming]

Worked for me too! Thanks @vch-a5sys

[leandrolimadeveloper]

Thanks for the answer @vch-a5sys! It helped me solve my issue. I solved it this way:

Input component

/* eslint-disable @typescript-eslint/no-explicit-any */
'use client'

import { RegisterOptions, UseFormRegister } from 'react-hook-form'

interface InputProps<T = string | number | readonly string[] | undefined> {
    type: string
    placeholder: string
    name: string
    register: UseFormRegister<any>
    error?: string | undefined
    rules?: RegisterOptions
    disabled?: boolean
    value?: T
    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
}


export function Input({ type, placeholder, name, register, error, rules, disabled, value, onChange }: InputProps) {
    return (
        <>
            <input
                className="w-full border-2 rounded-md h-11 px-2 my-2 text-textPrimary"
                type={type}
                placeholder={placeholder}
                {...register ? register(name, rules) : undefined}
                id={name}
                disabled={disabled}
                value={value}
                onChange={onChange}
            />
            {error && <p className="text-red-500 text-sm my-1">{error}</p>}
        </>
    )
}

Form

          <Input
                type="text"
                placeholder="Digite seu nome completo"
                error={errors.name?.message}
                register={register}
                {...register('name', {
                    onChange: (event: React.ChangeEvent<HTMLInputElement>) => {
                        setValue('name', event.target.value)
                    }
                })}
            />

[dhavall08]

Adding below way worked for me with uncontrolled components when the browser auto-fills and still we see required field errors on submit.

onChange={(e) => {
 setValue('field-name', e.target.value);
}}

[EdPutans]

I ended up having to force-rerender the form on each change 🤮

const [_, setFakeState] = useState<number>(0);

....
<input
{...register('fieldName', {
      onChange: e => {
        setValue('fieldName', e.target.value);
       setFakeState(state => state + 1);
  }
  >

[Nurpeyis]

I figured out that after auto filling react-hook-form doesn't change touched fields list, but changes dirty fields. So I resolved by comparing this data and trigger all fields.

useEffect(() => {
    if (Object.keys(dirtyFields).length && !Object.keys(touchedFields).length) {
      trigger();
    }
}, [dirtyFields, touchedFields]);

[tripolskypetr]

Looks like all these methods with autofill prop are simple ignored by Google Chrome since 2022. I suggest a different method: using readOnly={true} until focus event

Keep in mind that on mobile safari keyboard will not shown if input field change readonly state after focus event, so you need to process onTouchStart too. Heres the link to the source code of usePreventAutofill hook

import { usePreventAutofill } from 'react-declarative';

...

const preventAutofill = usePreventAutofill();

...

return (
  <InputBase

      ...

      {...preventAutofill}
  />   
);
 

[lightrow]

i'm using the approach with useEffect and dirtyFields and touchedFields as dependencies to trigger validation on autofilled fields to show a validation message immediately - it works somewhat, but not reliably. E.g. autofilling with 1Password doesn't trigger this effect, however the watch listener correctly detects the updated fields and their autofilled values. I haven't yet figured out how to tell apart inside watch callback whether the field has been autofilled and needs to be validated, or the user is just manually typing in though, which should not trigger validation.

The problem is that when field is autofilled, it becomes dirty but not touched. And it's exactly the same state as when the user has focused the field for the first time and typed something in without blurring yet. There appears to be no way to solve this without changing validation mode to "onChange" which is not desired. Is there maybe some way for the library to mark the field as touched, if its value changed from the default one without any user actions? Seems like that would be the expected behaviour. Validation still happens, but because the field remains "untouched", the validation error message will not appear, until user focuses the invalid field and blurs it. This is very problematic for forms that disable the submit button until everything is valid.

this is about autofilling multiple fields, e.g. a registration form - user clicks first name, selects their contact from 1Password, and autofill happens on multiple fields. Only first name will become "touched", because it's been focused and blurred. The validation mode i want to use is "onTouched". "onChange" works as expected but nagging the user before they are finished is not good UX.

[pre-ska]

My colleague @gnekich and I came up with this solution:

In you component, under useForm hook add this block:

  const oldFieldsValues = React.useRef(form.getValues());
  const watchAllFields = form.watch();
 

  React.useEffect(() => {
     for (const target of Object.keys(watchAllFields)) {
      if (watchAllFields?.[target] !== oldFieldsValues?.current?.[target]) {
        form.trigger(target);
      }
    }

    oldFieldsValues.current = watchAllFields;
   }, [watchAllFields]);

we are trying to detect which fields changed after the browser autofill, or standard user input, and run trigger only on them
this seams to work for all our use cases

[mangalprada]

The following solution works really well for me.

In the parent compoent :

...

  const {
    register,
    control,
    handleSubmit,
    formState: { errors },
    setValue,
    watch,
    reset,
  } = useForm<FormData>({
    resolver: yupResolver(validationSchema) as any,
  });
  
  return(
         <Input
            label="Postal Code"
            name="postal_code"
            control={control}
            watch={watch}
            error={errors.postal_code}
            required
          />);

...

In the child component:

 ...
 
  const { field } = useController({
    name,
    control,
    rules: { required },
  });

  const watchedValue = watch(name);
  
        return (
        <input
          id={name}
          {...field}
          value={watchedValue || ''}
          />);
         
...

[Diego-Romero]

In my case, the validation and the validation were not being triggered, this is what actually made it work for me:

onChange={(e) => {
  form.setValue("lastName", e.target.value, {
    shouldDirty: true,
    shouldValidate: true,
  });
}}

[elton-alves-ribeiro]

What worked for me was focusing on inputs right after persisting the change with e.target.focus(); (added it to all inputs):

<Input
  {...register("email")}
  placeholder="ex: joao@example.com"
  defaultValue={checkoutData.email}
  onChange={(e) => {
    setCheckoutData({ email: e.target.value });
    e.target.focus();
  }}
/>

[dimasyrnyk]

I figured out that it is because react hook form with register relies on DOM events that doesn't trigger by browsers with autofill. So I used control and added "onInput" handler with "onChange" from that control. I guess it will work with register, but in this case we need to add "setValue" and "trigger" to our custom input component's props and invoke in "onInput", that's why I used to go with control insted.

    <Controller
      name={name}
      control={control}
      render={({ field }) => (
        <input
          {...field}
          placeholder="Write here"
          onInput={field.onChange}
          {...props}
          required
        />
      )}
    />

[EvgenyWaveBL]

As an alternative and more native solution i would suggest to change mode to "onSubmit" and allow user to get the error messages if any when he hits submit, since it will natively trigger anything in form whats needed without anything hacky...
While using mode definetely depends on context and may not fit ur particular case (debatable), in a login form it would be actually a best practice to switch to mode:"onSubmit"