FormKit: How I ignore all requried fields and submit form with the data? - For buffering/save the existing data so far

Question

I have a vue3 App with the FormKit library. It's a big form with validation and there is the possibilty to submit all the data, if everything is valid, but there is also the possibility to buffer the data via a save button and at this case it should ignore the required fields. How I achieve this with the FormKit library?

Answer 1

I was able to achieve this functionality doing the following. The only reason I set actions to false and manually added the submit button is so I could style the buttons a little easier. I think the main thing is you need to add a button of type button so that it doesn't trigger the validation when you click it.

<FormKit
  id="myForm"
  type="form"
  :actions="false"
  @submit="$emit('submit-form', form)"
>
  <div>
       <!-- your form elements here -->
  </div>
  <div>
    <p>
      To save your current progress and finish at a later time click the "save for later" button. Once you are done filling out the program form you can click "submit program" to complete the process.
    </p>
  </div>
  <div class="flex">
    <button type="button" @click="$emit('submit-form', form)">
      save for later
    </button>
    <div class="flex-1"></div>
    <button type="submit">
      submit program
    </button>
  </div>
</FormKit>

Answer 2

One way you could achive this is by leveraging the events submit-raw or submit-invalid, they trigger even if there are validation errors, that way you can add a way to save your data whenever the user clicks the save button, and only sending to the server when it hits the submit event.