Recommended way to handle form validation

[dword-design-honestly]

Hi guys,

I used VeeValidate for form validation with BootstrapVue and there is this page giving some recommendations about how to use it with BootstrapVue. Now I was asking myself what the recommended way is for bootstrap-vue-next? I found this page on how to integrate VeeValidate into popular UI libraries (using useForm and defineField), but I wanted to hear your opinion since there have been conceptual changes between Vue 2 and Vue 3, especially with Composition API.

<script setup>
import { useForm } from 'vee-validate';

const { defineField, handleSubmit, resetForm, errors, values } = useForm({
  validationSchema: schema,
  initialValues: {
    terms: false,
  },
});

const bootstrapConfig = (state) => ({
  props: {
    validFeedback: 'Looks alright!',
    invalidFeedback: state.errors[0],
    state: state.errors[0] ? false : state.touched ? true : undefined,
  },
});

const [fullName, fullNameProps] = defineField('fullName', bootstrapConfig);

const onSubmit = handleSubmit((values) => {
  console.log('Submitted with', values);
});
</script>

<template>
  <b-form @submit="onSubmit">
    <b-form-group
      id="input-group-1"
      label="Full name:"
      label-for="input-1"
      v-bind="fullNameProps"
    >
      <b-form-input
        id="input-1"
        v-model="fullName"
        placeholder="Enter name"
      ></b-form-input>
    </b-form-group>

    <b-button type="submit" variant="primary">Submit</b-button>
  </b-form>
</template>

[VividLemon]

There is no recommended way to do validation. It's outside the scope of this library and is really up to user comfort on how one prefers to do validation. That being said, it would be helpful if you or someone were to add some examples. One with veevalidate, vuelidate, and perhaps a "raw example" would be nice

[dword-design-honestly]

@VividLemon Ok thx, will provide something when I've found a working practice with vee-validate.

[github-actions[bot]]

This issue is stale because it has been open for 30 days with no activity. It will not be auto-closed