Show Form Errors without using submit button

[MohammedSaberMohammed]

Hello everyone,
I have a situation where I want to show the form errors without using submit.

Details:

I have two buttons

1. The first one is to search after check form validation and additional stuff related to submit.
2. The second one will do another thing but it should also run the validators and show form Errors

Code

This to check if the field is validated or not to show error Indictors
const hasError = computed(() => { return ( meta.touched && errors.value.length && (!meta.validated || (meta.validated && !meta.valid)) ) })

And this attempt for showing errors
const showFormErrors = () => { form.validate().then(data => { form.setErrors(data.errors) }); };

So How can I show form errors programatically.
Thanks in Advance

[logaretm]

Sorry, I'm not sure what are you trying to achieve here. You can already trigger validation with validate() on both useForm return object and Form component.

Please try to describe clearly, you can add an example with code sandbox to show me what you are trying to do.

[MohammedSaberMohammed]

To give u a hint
When I use @submit all fields are validated and all errors appears as helperTexts.

What I am trying to do is to simulate this behavior with regular button without using type submit in order not to trigger the same function that I use with submit handle.
Also I will provide an example soon.

[MohammedSaberMohammed]

@logaretm Example
please read from line 42 in App File.

[logaretm]

You can use handleSubmit multiple times, its up to you to decide which one should trigger on "submit".

So this is one possible solution:

    const onSaveFormClicked = handleSubmit(() => {
      // Don't access here unless the form is valid
      // and if there are errors it should be displayed like in submit action

      console.log(
        "I'm here after form is valid and errors displayed to the user"
      );
    });

Another is to use validate() then decide what you want to do:

    const onSaveFormClicked = async () => {
      const result = await restProps.validate();
      if (!result.valid) {
        return;
      }

      console.log(
        "I'm here after form is valid and errors displayed to the user"
      );
    };

https://codesandbox.io/s/vee-validate-v4-with-quasar-framework-forked-44xou?file=/src/App.vue

[MohammedSaberMohammed]

@logaretm Thanks, that's what I needed to do.