1dbc691c6SDixsie# Forms 2dbc691c6SDixsie 3*7385e139SPatrick WilliamsForms are created using the 4*7385e139SPatrick Williams[bootstrap-vue form component](https://bootstrap-vue.org/docs/components/form) 5dbc691c6SDixsieand validated with the [Vuelidate](https://vuelidate.js.org/#sub-installation) 6dbc691c6SDixsieplugin. 7dbc691c6SDixsie 8dbc691c6SDixsie## Form component 9dbc691c6SDixsie 10*7385e139SPatrick WilliamsWhen creating a new form, use the `<b-form>` 11*7385e139SPatrick Williams[form component](https://bootstrap-vue.org/docs/components/form). Use the 12*7385e139SPatrick Williams`.prevent` event modifier on submit to prevent the submit event from reloading 13*7385e139SPatrick Williamsthe page. 14dbc691c6SDixsie 15dbc691c6SDixsie## Form group component 16dbc691c6SDixsie 17*7385e139SPatrick WilliamsThe `<b-form-group>` 18*7385e139SPatrick Williams[form group component](https://bootstrap-vue.org/docs/components/form-group) 19*7385e139SPatrick Williamspairs form controls with a legend or label, helper text, invalid/valid feedback 20*7385e139SPatrick Williamstext, and visual validation state feedback. Learn more about commonly used form 21*7385e139SPatrick Williamscomponents: 22dbc691c6SDixsie 23dbc691c6SDixsie- [Form checkbox](https://bootstrap-vue.org/docs/components/form-checkbox) 24dbc691c6SDixsie- [Form input](https://bootstrap-vue.org/docs/components/form-input) 25dbc691c6SDixsie- [Form radio](https://bootstrap-vue.org/docs/components/form-radio) 26dbc691c6SDixsie- [Form select](https://bootstrap-vue.org/docs/components/form-select) 27dbc691c6SDixsie- [Form file custom component](/guide/components/file-upload) 28dbc691c6SDixsie 29*7385e139SPatrick WilliamsWhen helper text is provided, use the `<b-form-text>` component and 30*7385e139SPatrick Williams`aria-describedby` on the form group component the helper text describes. 31dbc691c6SDixsie 32dbc691c6SDixsie## Validation 33dbc691c6SDixsie 34*7385e139SPatrick WilliamsFor custom form validation messages, disable browser native HTML5 validation by 35*7385e139SPatrick Williamssetting the `novalidate` prop on `<b-form>`. Use Vuelidate to check the form 36*7385e139SPatrick Williamsvalidation state and add custom validation messages in the 37*7385e139SPatrick Williams`<b-form-invalid-feedback>` component. 38dbc691c6SDixsie 39*7385e139SPatrick WilliamsWhen creating a new form add the `VuelidateMixin` to the `scripts` block and 40*7385e139SPatrick Williamsimport any [validators](https://vuelidate.js.org/#validators) needed such as: 41*7385e139SPatrick Williams`required`, `requiredIf`, etc. The use of built-in validators is preferred. 42dbc691c6SDixsie 43dbc691c6SDixsie## Complete form 44dbc691c6SDixsie 45dbc691c6SDixsieA complete form will look like this. 46dbc691c6SDixsie 47dbc691c6SDixsie```vue 48dbc691c6SDixsie<template> 49dbc691c6SDixsie <b-form novalidate @submit.prevent="handleSubmit"> 50dbc691c6SDixsie <b-form-group 51dbc691c6SDixsie :label="$t('pageName.form.inputLabel')" 52dbc691c6SDixsie label-for="form-input-id" 53dbc691c6SDixsie > 54dbc691c6SDixsie <b-form-text id="form-input-helper-text"> 55*7385e139SPatrick Williams {{ $t("pageName.form.helperText") }} 56dbc691c6SDixsie </b-form-text> 57dbc691c6SDixsie <b-form-input 58dbc691c6SDixsie id="form-input-id" 59dbc691c6SDixsie v-model="form.input" 60dbc691c6SDixsie type="text" 61dbc691c6SDixsie aria-describedby="form-input-helper-text" 62dbc691c6SDixsie :state="getValidationState($v.form.input)" 63dbc691c6SDixsie @change="$v.form.input.$touch()" 64dbc691c6SDixsie /> 65dbc691c6SDixsie <b-form-invalid-feedback role="alert"> 66dbc691c6SDixsie <div v-if="!$v.form.input.required"> 67*7385e139SPatrick Williams {{ $t("global.form.fieldRequired") }} 68dbc691c6SDixsie </div> 69dbc691c6SDixsie </b-form-invalid-feedback> 70dbc691c6SDixsie </b-form-group> 71dbc691c6SDixsie <b-button variant="primary" type="submit" class="mb-3"> 72*7385e139SPatrick Williams {{ $t("global.action.save") }} 73dbc691c6SDixsie </b-button> 74dbc691c6SDixsie </b-form> 75dbc691c6SDixsie</template> 76dbc691c6SDixsie 77dbc691c6SDixsie<script> 78dbc691c6SDixsieimport VuelidateMixin from '@/components/Mixins/VuelidateMixin'; 79dbc691c6SDixsieimport { required } from 'vuelidate/lib/validators'; 80dbc691c6SDixsie 81dbc691c6SDixsieexport default { 82dbc691c6SDixsie name: 'PageName', 83dbc691c6SDixsie components: { 84dbc691c6SDixsie ... 85dbc691c6SDixsie }, 86dbc691c6SDixsie mixins: [VuelidateMixin], 87dbc691c6SDixsie data(){ 88dbc691c6SDixsie form: { 89dbc691c6SDixsie input: '', 90dbc691c6SDixsie } 91dbc691c6SDixsie }, 92dbc691c6SDixsie validations() { 93dbc691c6SDixsie return { 94dbc691c6SDixsie form: { 95dbc691c6SDixsie input: { required }, 96dbc691c6SDixsie } 97dbc691c6SDixsie } 98dbc691c6SDixsie }, 99dbc691c6SDixsie computed: { 100dbc691c6SDixsie ... 101dbc691c6SDixsie }, 102dbc691c6SDixsie created() { 103dbc691c6SDixsie ... 104dbc691c6SDixsie }, 105dbc691c6SDixsie methods:{ 106dbc691c6SDixsie handleSubmit() { 107dbc691c6SDixsie this.$v.$touch(); 108dbc691c6SDixsie if (this.$v.$invalid) return; 109dbc691c6SDixsie this.$store 110dbc691c6SDixsie .dispatch( 111dbc691c6SDixsie 'pageName/updateFormData', 112dbc691c6SDixsie formData 113dbc691c6SDixsie ) 114dbc691c6SDixsie .then((success) => { 115dbc691c6SDixsie this.successToast(success); 116dbc691c6SDixsie }) 117dbc691c6SDixsie .catch(({ message }) => this.errorToast(message)) 118dbc691c6SDixsie .finally(() => { 119dbc691c6SDixsie this.$v.form.$reset(); 120dbc691c6SDixsie this.endLoader(); 121dbc691c6SDixsie }); 122dbc691c6SDixsie }, 123dbc691c6SDixsie}; 124dbc691c6SDixsie</script> 125dbc691c6SDixsie``` 126