summaryrefslogtreecommitdiff
path: root/docs/guide/quickstart/forms.md
diff options
context:
space:
mode:
authorPatrick Williams <patrick@stwcx.xyz>2022-12-08 15:13:13 +0300
committerPatrick Williams <patrick@stwcx.xyz>2022-12-08 15:13:13 +0300
commit7385e139b0c9efca7430458cee982e63e282f4ae (patch)
tree1bbdb0164e556b76eec72cb558c66974c8f95dd8 /docs/guide/quickstart/forms.md
parentb24a483eda5ca0b0ecdb4f0c61b90d76d0d8e1e0 (diff)
downloadwebui-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.md47
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>