diff options
author | Patrick Williams <patrick@stwcx.xyz> | 2022-12-08 15:13:13 +0300 |
---|---|---|
committer | Patrick Williams <patrick@stwcx.xyz> | 2022-12-08 15:13:13 +0300 |
commit | 7385e139b0c9efca7430458cee982e63e282f4ae (patch) | |
tree | 1bbdb0164e556b76eec72cb558c66974c8f95dd8 /docs/guide/quickstart/forms.md | |
parent | b24a483eda5ca0b0ecdb4f0c61b90d76d0d8e1e0 (diff) | |
download | webui-vue-7385e139b0c9efca7430458cee982e63e282f4ae.tar.xz |
prettier: re-format
Prettier is enabled in openbmc-build-scripts on Markdown, JSON, and YAML
files to have consistent formatting for these file types. Re-run the
formatter on the whole repository.
Change-Id: I2804ee3ab5ff6bcbf986b028db2fafec8e616779
Signed-off-by: Patrick Williams <patrick@stwcx.xyz>
Diffstat (limited to 'docs/guide/quickstart/forms.md')
-rw-r--r-- | docs/guide/quickstart/forms.md | 47 |
1 files changed, 23 insertions, 24 deletions
diff --git a/docs/guide/quickstart/forms.md b/docs/guide/quickstart/forms.md index 5356eac0..b30c946d 100644 --- a/docs/guide/quickstart/forms.md +++ b/docs/guide/quickstart/forms.md @@ -1,23 +1,24 @@ # Forms -Forms are created using the [bootstrap-vue form -component](https://bootstrap-vue.org/docs/components/form) +Forms are created using the +[bootstrap-vue form component](https://bootstrap-vue.org/docs/components/form) and validated with the [Vuelidate](https://vuelidate.js.org/#sub-installation) plugin. ## Form component -When creating a new form, use the `<b-form>` [form -component](https://bootstrap-vue.org/docs/components/form). Use the `.prevent` -event modifier on submit to prevent the submit event from reloading the page. +When creating a new form, use the `<b-form>` +[form component](https://bootstrap-vue.org/docs/components/form). Use the +`.prevent` event modifier on submit to prevent the submit event from reloading +the page. ## Form group component -The `<b-form-group>` [form group -component](https://bootstrap-vue.org/docs/components/form-group) -pairs form controls with a legend or label, helper text, invalid/valid -feedback text, and visual validation state feedback. Learn more about -commonly used form components: +The `<b-form-group>` +[form group component](https://bootstrap-vue.org/docs/components/form-group) +pairs form controls with a legend or label, helper text, invalid/valid feedback +text, and visual validation state feedback. Learn more about commonly used form +components: - [Form checkbox](https://bootstrap-vue.org/docs/components/form-checkbox) - [Form input](https://bootstrap-vue.org/docs/components/form-input) @@ -25,21 +26,19 @@ commonly used form components: - [Form select](https://bootstrap-vue.org/docs/components/form-select) - [Form file custom component](/guide/components/file-upload) -When helper text is provided, use the `<b-form-text>` component and `aria-describedby` on the -form group component the helper text describes. +When helper text is provided, use the `<b-form-text>` component and +`aria-describedby` on the form group component the helper text describes. ## Validation -For custom form validation messages, disable browser native HTML5 -validation by setting the `novalidate` prop on `<b-form>`. Use Vuelidate to -check the form validation state and add -custom validation messages in the `<b-form-invalid-feedback>` component. +For custom form validation messages, disable browser native HTML5 validation by +setting the `novalidate` prop on `<b-form>`. Use Vuelidate to check the form +validation state and add custom validation messages in the +`<b-form-invalid-feedback>` component. -When creating a new form add the `VuelidateMixin` -to the `scripts` block and import any -[validators](https://vuelidate.js.org/#validators) needed -such as: `required`, `requiredIf`, etc. The use of built-in validators is -preferred. +When creating a new form add the `VuelidateMixin` to the `scripts` block and +import any [validators](https://vuelidate.js.org/#validators) needed such as: +`required`, `requiredIf`, etc. The use of built-in validators is preferred. ## Complete form @@ -53,7 +52,7 @@ A complete form will look like this. label-for="form-input-id" > <b-form-text id="form-input-helper-text"> - {{ $t('pageName.form.helperText') }} + {{ $t("pageName.form.helperText") }} </b-form-text> <b-form-input id="form-input-id" @@ -65,12 +64,12 @@ A complete form will look like this. /> <b-form-invalid-feedback role="alert"> <div v-if="!$v.form.input.required"> - {{ $t('global.form.fieldRequired') }} + {{ $t("global.form.fieldRequired") }} </div> </b-form-invalid-feedback> </b-form-group> <b-button variant="primary" type="submit" class="mb-3"> - {{ $t('global.action.save') }} + {{ $t("global.action.save") }} </b-button> </b-form> </template> |