Handle submission

Now your first form is almost ready. There is only one little thing missing and that is the data processing when the form is submitted.

Submit event

To process the values on submission, you need to pass a function to the @submit event of the Form component. The first parameter passed to the function contains the validated form values.

<script setup lang="ts">
import { Field, Form, useForm } from '@formisch/vue';
import type { SubmitHandler } from '@formisch/vue';
import * as v from 'valibot';

const LoginSchema = v.object({
  email: v.pipe(v.string(), v.email()),
  password: v.pipe(v.string(), v.minLength(8)),
});

const loginForm = useForm({
  schema: LoginSchema,
});

const submitForm: SubmitHandler<typeof LoginSchema> = (values) => {
  // Process the validated form values
  console.log(values); // { email: string, password: string }
};
</script>

<template>
  <Form :of="loginForm" @submit="submitForm">
    <!-- Form fields will go here -->
  </Form>
</template>

The SubmitHandler type ensures type safety for your submission handler, automatically inferring the types of validated values from your schema. If you need access to the submit event, use SubmitEventHandler instead.

Prevent default

When the form is submitted, event.preventDefault() is executed by default to prevent the window from reloading so that the values can be processed directly in the browser and the state of the form is preserved.

Loading state

While the form is being submitted, you can use loginForm.isSubmitting to display a loading animation and disable the submit button:

<button type="submit" :disabled="loginForm.isSubmitting">
  {{ loginForm.isSubmitting ? 'Submitting...' : 'Login' }}
</button>

The form store also provides other reactive properties like isSubmitted, isValidating, isTouched, isDirty, isValid, and errors for tracking form state. Note that errors only contains validation errors at the root level of the form — to get all errors from all fields, use the getAllErrors method.

Async submission

The submit handler can be asynchronous, allowing you to perform API calls or other async operations:

const submitForm: SubmitHandler<typeof LoginSchema> = async (values) => {
  try {
    const response = await fetch('/api/login', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(values),
    });

    if (response.ok) {
      // Handle successful login
      console.log('Login successful!');
    } else {
      // Handle error
      console.error('Login failed');
    }
  } catch (error) {
    console.error('Error during submission:', error);
  }
};

Trigger submission

If you want to trigger submission programmatically from outside the form, you can use the submit method. It calls requestSubmit() on the underlying form element:

<script setup lang="ts">
import { submit } from '@formisch/vue';
</script>

<template>
  <button type="button" @click="submit(loginForm)">Submit from outside</button>
</template>

Submit without <form />

In some cases, you may not be able to wrap your fields in a <form> element — for example, when your form is rendered inside another form, since nesting <form> elements is invalid HTML. In these situations, you can use the handleSubmit method directly to submit the form programmatically without the Form component.

The returned function accepts no arguments and can be called from anywhere — for example, from a button's @click handler:

<script setup lang="ts">
import { Field, handleSubmit, useForm } from '@formisch/vue';
import * as v from 'valibot';

const LoginSchema = v.object({
  email: v.pipe(v.string(), v.email()),
  password: v.pipe(v.string(), v.minLength(8)),
});

const loginForm = useForm({
  schema: LoginSchema,
});

const submitForm = handleSubmit(loginForm, (values) => {
  // Process the validated form values
  console.log(values);
});
</script>

<template>
  <div>
    <!-- Form fields without a <Form /> wrapper -->
    <button type="button" @click="submitForm">Login</button>
  </div>
</template>

Next steps

Congratulations! You've learned the core concepts of building forms with Formisch. To learn more about advanced features, check out the form methods guide to discover how to programmatically control your forms.