Focus first input error using useForm

[albertcito]

In a form with several required inputs, if the user click on submit it should focus the first error input.

In order to make it work I added the register function in useForm it has an array of all input registered:

import { useField, useForm as useVeeForm, FieldContext } from 'vee-validate';
import { Ref, ref } from 'vue';

import { FieldOptions, RuleExpression, MaybeRef } from './useFormVeeTypes';

interface UseFormProps<FormValues> {
  initialValues?: Partial<FormValues>;
}

interface RegisteredValueProps<TValue = unknown> extends FieldContext<TValue> {
  ref: Ref
  setRef: (ref: unknown) => void
}

const stringFromMaybeRef = (name: MaybeRef<string>) => (
  typeof name === 'string' ? name : name.value
);

const useForm = <FormValues>({ initialValues }: UseFormProps<FormValues>) => {
  const { handleSubmit, errors, ...forms } = useVeeForm<FormValues>({
    initialValues: initialValues as FormValues,
  });

  const internalRegistered: RegisteredValueProps[] = [];

  const register = <TValue = unknown>(
    name: MaybeRef<string>,
    rules?: MaybeRef<RuleExpression<TValue>>,
    opts?: Partial<FieldOptions<TValue>>,
  ) => {
    const field = useField<TValue>(name, rules, opts);
    const refInput = ref();
    const result: RegisteredValueProps<TValue> = {
      ...field,
      ref: refInput,
      setRef: (refValue: unknown) => { refInput.value = refValue; },
    };
    internalRegistered.push(result);

    return result;
  };

  const focusError = () => {
    if (Object.keys(errors.value).length === 0) {
      return;
    }
    for (let index = 0; index < internalRegistered.length; index += 1) {
      const reg = internalRegistered[index];
      const name = stringFromMaybeRef(reg.name);
      if (Object.keys(errors.value).includes(name) && reg.ref.value) {
        reg.ref.value.focus();
        break;
      }
    }
  };

  return {
    ...forms,
    handleSubmit,
    errors,
    register,
    focusError,
  };
};

export default useForm;

So I can call it with the function:

const {
  handleSubmit, resetForm, register, focusError,
} = useForm({ initialValues: props.initialValues });
const fullName = register('fullname_contact', Yup.string().trim().required('Full name is required'));
const email = register('email_contact', Yup.string().email().trim().required('Email is required'));

...

const onSubmit = handleSubmit(
  (values: FormValues) => emit('submit', values),
  focusError, // Focus first error input
);

In <template> call my custom Input component:

<Input
  v-model="school.value.value"
  :errors="school.errors.value.value"
  @ref="school.setRef"
/>

In my Input component:

<input
  ref="refInput"
  v-model="inputValue"
  v-maska="mask"
  :name="name"
  :placeholder="placeholder"
  :type="type"
  :class="[
    defaultClass,
    $props.class,
    {[errorClass]: errors.length > 0},
    {[noErrorClass]: errors.length === 0},
  ]"
  @focus="$emit('focus')"
  @blur="$emit('blur')"
  @input="$emit('input')"
>

setup(properties, { emit }) {
  const inputValue = computed({
    get: () => properties.modelValue,
    set: (value) => emit('update:modelValue', value),
  });
  const refInput = ref();
  watch(refInput, () => {
    emit('ref', refInput.value);
  });
  return {
    inputValue,
    refInput,
  };
},

[rashidpathiyil]

it's will be useful if there is a feature to focus the first input field that shows an error.

[seanwuapps]

We're also looking to achieve something similar, we have been using the

component, i think it'd be great if the <Form> component could emit an event (onError?) whenever the form errors change.