Vue Formulate validation for two fields at the same time

Question

I'm currently building a form in Vue js and I'm using Vueformulate, the docs have various ways of validation however there is no validation method or implementation that for my use case. I would like the validation to call a custom function because this way I could check if Field1 or Field2 has a value. Is there an implementation like my psuedocode below? thanks in advance!

<FormulateForm @submit="onSubmit" #default="{ hasErrors }">

 <FormulateInput
       type="text"
       label="Field1"
       validation="customValidation"
 />

 <FormulateInput
       type="text"
       label="Field2"
       validation="customValidation"
 />


  <FormulateInput
        type="submit"
        label="Submit"
        input-class="btn btn-primary w-full"
        :disabled="hasErrors"
      />
</FormulateForm>


//NOT REAL CODE 
customValidation(formValues){
   if(formValues.Field1 || formValues.Field2){  
        return true // CHECK IF EITHER FIELD1 OR FIELD 2 HAS VALUE IF SO MARK THE FIELD AS VALID WHICH ENABLES SUBMIT BUTTON
    }
    return false
}

Answer 1

You can declare a custom validation rule via <FormulateInput>.validationRules:

<script setup>
const validationRules = {
  customValidation({ getFormValues }) {
    // property names match the input names
    const { field1, field2 } = getFormValues()
    if (field1 || field2) {
      return true
    }
  },
}
</script>

<template>
  <FormulateInput
      type="text"
      label="Field1"
      name="field1"
      validation="customValidation"
      :validationRules="validationRules"
    />

  <FormulateInput
      type="text"
      label="Field2"
      name="field2"
      validation="customValidation"
      :validationRules="validationRules"
    />
</template>

But FormulateForm assumes an error state unless all fields are touched (at least in my demo). Not sure how you could get around that.

demo