How to use 2 validated Buttons

[sandrarum]

I have a problem. For my current project with "@formkit/nuxt": "1.6.5", I need a FormKit form with 2 buttons that both validate the data, but then do different things with it. I tried setting both as submit buttons, but then in the submit handler I don't get any information about which one I pressed. I also tried triggering the validation manually, but it doesn't find the validate() method.

Is there a way to solve this problem?

My Code Example:

<template>
  <FormKit id="myForm" type="form" ref="formRef" v-model="formData" :actions="false" @submit="onSubmit">
    <FormKit
      type="text"
      name="title"
      label="Title"
      validation="required|min:3"
    />
    <FormKit
      type="number"
      name="prio"
      label="Priority"
      validation="required|min:1|max:10"
    />
    <FormKit type="submit" label="Submit" />
    <FormKit type="button" label="Copy Parameters" @click="onCopyParams" />
    <pre v-if="copyResult">{{ copyResult }}</pre>
  </FormKit>
</template>

<script setup>
import { ref } from 'vue'

const formRef = ref(null)
const formData = ref({
  title: '',
  prio: null
})
const copyResult = ref('')

async function onCopyParams() {
  if (formRef.value && formRef.value.node) {
    const valid = await formRef.value.node.validate()
    if (valid) {
      copyResult.value = JSON.stringify(formData.value, null, 2)
    } else {
      alert('Form validation failed')
    }
  }
}

function onSubmit(values) {
  alert('Form submitted with: ' + JSON.stringify(values))
}
</script>

[pjrusso]

Hi @sandrarum - I had a scenario where I needed to offer the ability save a partially complete form as well as using the normal submission process to validate and save the data.

As @justin-schroeder has said on several other issues the second of these scenarios is automatically handled within FormKit itself - so you don't need to call validate() so the standard built-in mechanism was fine.

My custom save button however walks the errors collection to remove any 'required' rules so I can save validated but partially completed forms:

/**
         * Save partially complete form (i.e. ignore required fields)
         * - skip those fields marked as dirty ignore
         * @param node 
         */
        saveForm: (node: FormKitNode) => async () => {
            console.log(`Centinix:: saveForm called for node: ${node.name}`);

            // Temporarily store the original validation rules
            const originalValidations = new Map();
            
            // Walk through all nodes and modify their validation rules
            node.walk((n) => {

                // Reset all error messages
                n.store.remove('submitted')
    
                n.store.set(
                    createMessage({
                        key: 'validation',
                        value: '',
                        visible: false,
                    })
                );

                // Store original validation rules
                if (n.props.validation) {
                    // Store original validation
                    originalValidations.set(n, n.props.validation);

                    // Remove required validation but keep other rules
                    const newValidation = n.props.validation.replace(/required\|?/g, '').replace(/\|\s*\|/g, '|'); // Remove 'required' rules
                    n.props.validation = newValidation;
                }

            });

            try {

                // Trigger validation with modified rules
                node.walk((n) => {
                    n.store.set(
                        createMessage({
                            key: 'saved',
                            value: true,
                            visible: false,
                        })
                    );
                });

                // Trigger a custom save-raw event for error summary (rather that native submit-raw)
                node.emit('save-raw', { payload: true });
                
                // Check if the form is valid (excluding required rules)
                if (node?.context?.state.valid) {
                    // Save the form data
                    console.log('Form saved successfully:', node.value);
                    
                    // Mark form as clean after successful save
                    node.store.set(
                        createMessage({
                            key: 'dirty',
                            value: false,
                            visible: false,
                        })
                    );

                    alert('Form saved successfully! Check the console for detailed data structure.');
                } else {
                    console.log('Form contains validation errors (excluding required fields).');

                    await showErrors(node);
                }
            } finally {

                // Restore original validation rules
                node.walk((n) => {
                    if (originalValidations.has(n)) {
                        n.props.validation = originalValidations.get(n);
                    }
                });

            }
        },

I defined this in the form schema itself to call the above:

   // Save button
    {
        $el: 'button',
        attrs: {
            type: 'button',
            class: 'formkit-submit',
            onClick: '$saveForm($node)',
            disabled: '$node.context.state.dirty == false',
            ariaLabel: 'Save the form'
        },
        children: ['Save']  
    },

So could this custom button approach + the built-in mechanism or another custom button/handler enable you to do what you need?

(note that in my example I had a custom error summary display for the 'showErrors' as well)