V4 How to focus on the first error field on validation / submit attempt?

[keith0305]

Hi, loving v4 so far. Combined with yup, the DX is so much better.

However, I have a question, as title, can I get a callback (like handleSubmit) where I can perform some side effects after a validation occur?

[logaretm]

At the moment we don't have anything to handle invalid submissions. You work around that by manually calling validate then doing some stuff based on the result.

But it might be a good thing to have to make it easier, I don't have a strong opinion about how we should go about it.

I'm thinking we could introduce a second callback to handleSubmit which will handle invalid submissions if provided. So something along these lines:

const onSubmit = handleSubmit(() => {
  // submit values
}, (errors) => {
  const firstError = Object.keys(errors)[0];
  document.querySelector(`input[name="${firstField}"]`);
});

What do you think?

[logaretm]

Awesome will convert this to an issue for tracking progress.

[tgarif]

Why does here says we have callback in handleSubmit?

https://vee-validate.logaretm.com/v4/guide/composition-api/handling-forms#handling-invalid-submissions

Also, when I'm using handleSubmit, the values are empty object.

signupWithEmail: handleSubmit(async (values) => {
  console.log(values); // This logs {} as empty object
  await new Promise((resolve) => setTimeout(resolve, 3000));
}),

[logaretm]

Because both of the two functions passed to handleSubmit are callbacks essentially both the success handler and the invalid handler. Could a change in docs wording be less confusing?

Also, when I'm using handleSubmit, the values are empty object.

It will be empty if the form doesn't have any fields, can you create an example for that?

[tgarif]

https://stackblitz.com/edit/vue-69s1rk?file=src/App.vue

This is the furthest I can reproduce the problem, but the styling part is a bit messy since I'm having some problem trying to reproduce it on stackblitz.

The problem I faced are:

1. When I try to do

const schema = object().shape({
  email: string()
    .email('Please enter a valid email address i.e: johndoe@gmail.com')
    .required('Email is required')
    .label('Email'),
  password: string().min(8).required('Password is required').label('Password'),
  confirm_password: string()
    .required()
    .oneOf([ref('password')], 'Your passwords do not match, please try again.')
    .label('Password Confirm'),
});

const { handleSubmit, isSubmitting, values } = useForm({
  validationSchema: schema,
});

It gives this error

Type 'ObjectSchema<Assign<ObjectShape, { email: RequiredStringSchema<string | undefined, Record<string, any>>; password: RequiredStringSchema<string | undefined, Record<string, any>>; confirm_password: RequiredStringSchema<...>; }>, Record<...>, TypeOfShape<...>, AssertsShape<...>>' is not assignable to type 'MaybeRef<Record<string, string | Record<string, any> | GenericValidateFunction> | ObjectSchemaOf<TypeOfShape<Assign<ObjectShape, { email: RequiredStringSchema<string | undefined, Record<...>>; password: RequiredStringSchema<...>; confirm_password: RequiredStringSchema<...>; }>>> | undefined>'.
  Type 'ObjectSchema<Assign<ObjectShape, { email: RequiredStringSchema<string | undefined, Record<string, any>>; password: RequiredStringSchema<string | undefined, Record<string, any>>; confirm_password: RequiredStringSchema<...>; }>, Record<...>, TypeOfShape<...>, AssertsShape<...>>' is not assignable to type 'ObjectSchemaOf<TypeOfShape<Assign<ObjectShape, { email: RequiredStringSchema<string | undefined, Record<string, any>>; password: RequiredStringSchema<string | undefined, Record<...>>; confirm_password: RequiredStringSchema<...>; }>>>'.
    Type 'Assign<ObjectShape, { email: RequiredStringSchema<string | undefined, Record<string, any>>; password: RequiredStringSchema<string | undefined, Record<string, any>>; confirm_password: RequiredStringSchema<...>; }>' is not assignable to type '{ [x: string]: ArraySchema<BaseSchema<unknown, AnyObject, unknown> | Lazy<BaseSchema<unknown, AnyObject, unknown>, AnyObject>, AnyObject, unknown[] | undefined, unknown[] | undefined>; email: BaseSchema<...>; password: BaseSchema<...>; confirm_password: BaseSchema<...>; }'.
      'string' index signatures are incompatible.
        Type 'AnySchema<any, any, any> | Reference<unknown> | Lazy<any, any>' is not assignable to type 'ArraySchema<BaseSchema<unknown, AnyObject, unknown> | Lazy<BaseSchema<unknown, AnyObject, unknown>, AnyObject>, AnyObject, unknown[] | undefined, unknown[] | undefined>'.
          Type 'BaseSchema<any, any, any>' is missing the following properties from type 'ArraySchema<BaseSchema<unknown, AnyObject, unknown> | Lazy<BaseSchema<unknown, AnyObject, unknown>, AnyObject>, AnyObject, unknown[] | undefined, unknown[] | undefined>': _subType, of, length, min, and 3 more.Vetur(2322)

on this line:
validationSchema: schema,

2. Without doing above, I can't get the values of the fields in the handleSubmit. I tried console.log values from useForm, but it return undefined.

signupWithEmail: handleSubmit(async () => {
  console.log(values.value);
  await new Promise((resolve) => setTimeout(resolve, 3000));
}),

Really appreciate it if you can help me overcome this problems

[tgarif]

I managed to resolve the problem after revisit the docs. I changed from using Form component into useForm composable function only. It works like charm. My mistakes before...

[seanwuapps]

Hey guys sorry to bump an old thread, but we use the Form component and there still doesn't seem to be a way to detect error changes. I think it'd be good if Form could emit an event on error change so that we could get the errors and handle focus from there.

[logaretm]

There is but only when a submission is attempted:

https://vee-validate.logaretm.com/v4/guide/components/handling-forms/#handling-invalid-submissions

[seanwuapps]

Thanks @logaretm, we're trying to handle both client-side and server-side validations at one place. My initial thought was to just add a "onError" listener and focus on the first errored field, then I kinda realised that'd be a huge pain for end users who's going through the form. so I will try and add a custom @submit handler in our wrapper component and see if we can modify the form actions there.