Integration
By utilizing the Integration feature of usebootstrap, you can achieve data retrieval from servers, display, JsonSchema validation, and Post updates solely with components, without the need for scripting.
For more details, please refer to the integration page.
JsonSchema
Looks good!
Please enter your email
Looks good!
Please enter your firstname
Looks good!
Please enter your firstname
vue
<template>
<ViewState
v-slot="user"
src="reqres://users/5"
path="data"
schema-src="app-config://usebootstrap/schemas/basic"
>
<Row margin="b-3">
<BColFormLabel
for="staticEmail"
class="col-sm-2"
>
ID
</BColFormLabel>
<Col col="sm-10">
<BFormInput
type="text"
validate
:value="user.data.id"
readonly="plaintext"
/>
</Col>
</Row>
<Row margin="b-3">
<BColFormLabel
for="staticEmail"
class="col-sm-2"
>
Email
</BColFormLabel>
<Col col="sm-10">
<BFormInput
type="text"
validate
:state-src="user"
state-path="email"
/>
<BValidFeedback>
<template #valid>
Looks good!
</template>
Please enter your email
</BValidFeedback>
</Col>
</Row>
<Row margin="b-3">
<BColFormLabel
for="inputPassword"
class="col-sm-2"
>
first_name
</BColFormLabel>
<Col col="sm-10">
<BFormInput
type="text"
validate
:state-src="user"
state-path="first_name"
/>
<BValidFeedback>
<template #valid>
Looks good!
</template>
Please enter your firstname
</BValidFeedback>
</Col>
</Row>
<Row margin="b-3">
<BColFormLabel
for="inputPassword"
class="col-sm-2"
>
last_name
</BColFormLabel>
<Col col="sm-10">
<BFormInput
type="text"
validate
:state-src="user"
state-path="last_name"
/>
<BValidFeedback>
<template #valid>
Looks good!
</template>
Please enter your firstname
</BValidFeedback>
</Col>
</Row>
<ActionState src="reqres://user/5">
<template #default="{ action }">
<b-button
color="primary"
:disabled="!user.validationResult.valid"
@click="action('post', user.data)"
>
Action
</b-button>
</template>
<template #fallback>
<b-button
color="primary"
disabled
>
<Spinner
spinner="grow"
sm
aria-hidden="true"
/>
Loading...
</b-button>
</template>
<template #complete="{ data, status }">
<b-button
color="success-subtle"
color-generate
@click="status.value = 0"
>
Retry
</b-button>
<div v-if="status.value == 201">
Response: {{ data }}
</div>
<div v-else>
ErrorMessages: {{ data }}
</div>
</template>
</ActionState>
</ViewState>
</template>
Custom styles
or custom Bootstrap form validation messages, you'll need to add the novalidate boolean attribute to your BForm . This disables the browser default feedback tooltips, but still provides access to the form validation APIs in JavaScript.
Try to submit the form below; our JavaScript will intercept the submit button and relay feedback to you. When attempting to submit, you'll see the :invalid and :valid styles applied to your form controls.
Custom feedback styles apply custom colors, borders, focus styles, and background icons to better communicate feedback. Background icons for BFormSelects are only available with BFormSelect, and not BFormControl.
vue
<template>
<BForm novalidate>
<Row gutter="3">
<Col col="md-4">
<BFormLabel for="validationCustom01">
First name
</BFormLabel>
<BFormInput
id="validationCustom01"
type="text"
value="Mark"
required
/>
<BValidFeedback>
<template #valid>
Looks good!
</template>
Please enter your firstname
</BValidFeedback>
</Col>
<Col col="md-4">
<BFormLabel for="validationCustom02">
Last name
</BFormLabel>
<BFormInput
id="validationCustom02"
type="text"
value="Otto"
required
/>
<BValidFeedback>
<template #valid>
Looks good!
</template>
Please enter your lasttname
</BValidFeedback>
</Col>
<Col col="md-4">
<BFormLabel for="validationCustomUsername">
Username
</BFormLabel>
<BInputGroup>
<BInputGroupText id="BInputGroupPrepend">
@
</BInputGroupText>
<BFormInput
id="validationCustomUsername"
type="text"
aria-describedby="BInputGroupPrepend"
required
/>
<BValidFeedback>
<template #valid>
Looks good!
</template>
Please choose a username.
</BValidFeedback>
</BInputGroup>
</Col>
<Col col="md-6">
<BFormLabel for="validationCustom03">
City
</BFormLabel>
<BFormInput
id="validationCustom03"
type="text"
required
/>
<BValidFeedback>
<template #valid>
Looks good!
</template>
Please provide a valid city.
</BValidFeedback>
</Col>
<Col col="md-3">
<BFormLabel for="validationCustom04">
State
</BFormLabel>
<BFormSelect required>
<option
selected
disabled
value=""
>
Choose...
</option>
<option>...</option>
</BFormSelect>
<BValidFeedback>
<template #valid>
Looks good!
</template>
Please select a valid state.
</BValidFeedback>
</Col>
<Col col="md-3">
<BFormLabel for="validationCustom05">
Zip
</BFormLabel>
<BFormInput
id="validationCustom05"
type="text"
required
/>
<BValidFeedback>
<template #valid>
Looks good!
</template>
Please provide a valid zip.
</BValidFeedback>
</Col>
<Col col="12">
<BFormCheck>
<BFormCheckInput
id="invalidCheck"
required
/>
<BFormCheckLabel for="invalidCheck">
Agree to terms and conditions
</BFormCheckLabel>
<BValidFeedback>
<template #valid>
Looks good!
</template>
You must agree before submitting.
</BValidFeedback>
</BFormCheck>
</Col>
<Col col="12">
<b-button
type="submit"
color="primary"
>
Submit form
</b-button>
</Col>
</Row>
</BForm>
</template>
Browser defaults
Not interested in custom validation feedback messages or writing JavaScript to change form behaviors? All good, you can use the browser defaults.
Try submitting the form below. Depending on your browser and OS, you'll see a slightly different style of feedback.
While these feedback styles cannot be styled with CSS, you can still customize the feedback text through JavaScript.
vue
<template>
<BForm>
<Row gutter="3">
<Col col="md-4">
<BFormLabel for="validationCustom01">
First name
</BFormLabel>
<BFormInput
id="validationCustom01"
type="text"
value="Mark"
required
/>
</Col>
<Col col="md-4">
<BFormLabel for="validationCustom02">
Last name
</BFormLabel>
<BFormInput
id="validationCustom02"
type="text"
value="Otto"
required
/>
</Col>
<Col col="md-4">
<BFormLabel for="validationCustomUsername">
Username
</BFormLabel>
<BInputGroup>
<BInputGroupText id="BInputGroupPrepend">
@
</BInputGroupText>
<BFormInput
id="validationCustomUsername"
type="text"
aria-describedby="BInputGroupPrepend"
required
/>
</BInputGroup>
</Col>
<Col col="md-6">
<BFormLabel for="validationCustom03">
City
</BFormLabel>
<BFormInput
id="validationCustom03"
type="text"
required
/>
</Col>
<Col col="md-3">
<BFormLabel for="validationCustom04">
State
</BFormLabel>
<BFormSelect required>
<option
selected
disabled
value=""
>
Choose...
</option>
<option>...</option>
</BFormSelect>
<BValidFeedback>Please select a valid state.</BValidFeedback>
</Col>
<Col col="md-3">
<BFormLabel for="validationCustom05">
Zip
</BFormLabel>
<BFormInput
id="validationCustom05"
type="text"
required
/>
</Col>
<Col col="12">
<BFormCheck>
<BFormCheckInput
id="invalidCheck"
required
/>
<BFormCheckLabel for="invalidCheck">
Agree to terms and conditions
</BFormCheckLabel>
</BFormCheck>
</Col>
<Col col="12">
<b-button
type="submit"
color="primary"
>
Submit form
</b-button>
</Col>
</Row>
</BForm>
</template>
Script Validation
In case you require script validation, you can indicate invalid and valid form fields with validation and in-valid.
Note that BValidFeedback is also supported with these classes.
vue
<template>
<BForm>
<Row gutter="3">
<Col col="md-4">
<BFormLabel for="validationCustom01">
First name
</BFormLabel>
<BFormInput
id="validationCustom01"
validate
type="text"
value="Mark"
required
/>
<BValidFeedback>
<template #valid>
Looks good!
</template>
Please enter your firstname
</BValidFeedback>
</Col>
<Col col="md-4">
<BFormLabel for="validationCustom02">
Last name
</BFormLabel>
<BFormInput
id="validationCustom02"
validate
type="text"
value="Otto"
required
/>
<BValidFeedback>
<template #valid>
Looks good!
</template>
Please enter your lasttname
</BValidFeedback>
</Col>
<Col col="md-4">
<BFormLabel for="validationCustomUsername">
Username
</BFormLabel>
<BInputGroup>
<BInputGroupText id="BInputGroupPrepend">
@
</BInputGroupText>
<BFormInput
id="validationCustomUsername"
validate
in-valid
type="text"
aria-describedby="BInputGroupPrepend"
required
/>
<BValidFeedback>
<template #valid>
Looks good!
</template>
Please choose a username.
</BValidFeedback>
</BInputGroup>
</Col>
<Col col="md-6">
<BFormLabel for="validationCustom03">
City
</BFormLabel>
<BFormInput
id="validationCustom03"
validate
in-valid
type="text"
required
/>
<BValidFeedback>
<template #valid>
Looks good!
</template>
Please provide a valid city.
</BValidFeedback>
</Col>
<Col col="md-3">
<BFormLabel for="validationCustom04">
State
</BFormLabel>
<BFormSelect
validate
in-valid
required
>
<option
selected
disabled
value=""
>
Choose...
</option>
<option>...</option>
</BFormSelect>
<BValidFeedback>
<template #valid>
Looks good!
</template>
Please select a valid state.
</BValidFeedback>
</Col>
<Col col="md-3">
<BFormLabel for="validationCustom05">
Zip
</BFormLabel>
<BFormInput
id="validationCustom05"
validate
in-valid
type="text"
required
/>
<BValidFeedback>
<template #valid>
Looks good!
</template>
Please provide a valid zip.
</BValidFeedback>
</Col>
<Col col="12">
<BFormCheck>
<BFormCheckInput
id="invalidCheck"
validate
in-valid
required
/>
<BFormCheckLabel for="invalidCheck">
Agree to terms and conditions
</BFormCheckLabel>
<BValidFeedback>
<template #valid>
Looks good!
</template>
You must agree before submitting.
</BValidFeedback>
</BFormCheck>
</Col>
<Col col="12">
<b-button
type="submit"
color="primary"
>
Submit form
</b-button>
</Col>
</Row>
</BForm>
</template>
Supported elements
Validation styles are available for the following form controls and components:
vue
<template>
<BForm was-vlidated>
<b-div margin="b-3">
<BFormLabel for="validationTextarea">
Textarea
</BFormLabel>
<BFormTextarea
id="validationTextarea"
placeholder="Required example textarea"
required
/>
<BValidFeedback>
<template #valid>
Looks good!
</template>
Please enter a message in the textarea.
</BValidFeedback>
</b-div>
<BFormCheck margin="b-3">
<BFormCheckInput required />
<BFormCheckLabel>Default checkbox</BFormCheckLabel>
<BValidFeedback>
<template #valid>
Looks good!
</template>
Example invalid feedback text
</BValidFeedback>
</BFormCheck>
<BFormCheck>
<BFormCheckInput
type="radio"
name="radio-stacked"
value="option1"
required
/>
<BFormCheckLabel>Toggle this radio</BFormCheckLabel>
</BFormCheck>
<BFormCheck margin="b-3">
<BFormCheckInput
type="radio"
name="radio-stacked"
value="option2"
required
/>
<BFormLabel>Or toggle this other radio</BFormLabel>
<BValidFeedback>
<template #valid>
Looks good!
</template>
Example invalid feedback text
</BValidFeedback>
</BFormCheck>
<b-div margin="b-3">
<BFormSelect required>
<option value>
Open this select menu
</option>
<option value="1">
One
</option>
<option value="2">
Two
</option>
<option value="3">
Three
</option>
</BFormSelect>
<BValidFeedback>
<template #valid>
Looks good!
</template>
Example invalid select feedback
</BValidFeedback>
</b-div>
<b-div margin="b-3">
<BFormFile required />
<BValidFeedback>
<template #valid>
Looks good!
</template>
Example invalid select feedback
</BValidFeedback>
</b-div>
<b-div margin="b-3">
<b-button
type="submit"
color="primary"
disabled
>
Submit form
</b-button>
</b-div>
</BForm>
</template>
Tooltips
If your form layout allows it, you can swap the BValidFeedback classes for BValidTooltip classes to display validation feedback in a styled tooltip.
Be sure to have a parent with position: relative on it for tooltip positioning.
In the example below, our column classes have this already, but your project may require an alternative setup.
vue
<template>
<BForm validation>
<Row gutter="3">
<Col
col="md-4"
position="relative"
>
<BFormLabel for="validationCustom01">
First name
</BFormLabel>
<BFormInput
id="validationCustom01"
type="text"
value="Mark"
required
/>
<BValidTooltip>
<template #valid>
Looks good!
</template>
Please enter your firstname
</BValidTooltip>
</Col>
<Col
col="md-4"
position="relative"
>
<BFormLabel for="validationCustom02">
Last name
</BFormLabel>
<BFormInput
id="validationCustom02"
type="text"
value="Otto"
required
/>
<BValidTooltip>
<template #valid>
Looks good!
</template>
Please enter your lasttname
</BValidTooltip>
</Col>
<Col
col="md-4"
position="relative"
>
<BFormLabel for="validationCustomUsername">
Username
</BFormLabel>
<BInputGroup>
<BInputGroupText id="BInputGroupPrepend">
@
</BInputGroupText>
<BFormInput
id="validationCustomUsername"
type="text"
aria-describedby="BInputGroupPrepend"
required
/>
<BValidTooltip>
<template #valid>
Looks good!
</template>
Please choose a username.
</BValidTooltip>
</BInputGroup>
</Col>
<Col
col="md-6"
position="relative"
>
<BFormLabel for="validationCustom03">
City
</BFormLabel>
<BFormInput
id="validationCustom03"
type="text"
required
/>
<BValidTooltip>
<template #valid>
Looks good!
</template>
Please select a valid state.
</BValidTooltip>
</Col>
<Col
col="md-3"
position="relative"
>
<BFormLabel for="validationCustom04">
State
</BFormLabel>
<BFormSelect required>
<option
selected
disabled
value=""
>
Choose...
</option>
<option>...</option>
</BFormSelect>
<BValidTooltip>
<template #valid>
Looks good!
</template>
Please select a valid state.
</BValidTooltip>
</Col>
<Col
col="md-3"
position="relative"
>
<BFormLabel for="validationCustom05">
Zip
</BFormLabel>
<BFormInput
id="validationCustom05"
type="text"
required
/>
<BValidTooltip>
<template #valid>
Looks good!
</template>
Please provide a valid zip.
</BValidTooltip>
</Col>
<Col col="12">
<BFormCheckInput
id="invalidCheck"
required
/>
<BFormLabel for="invalidCheck">
Agree to terms and conditions
</BFormLabel>
<BValidTooltip>
<template #valid>
Looks good!
</template>
You must agree before submitting.
</BValidTooltip>
</Col>
<Col col="12">
<b-button
type="submit"
color="primary"
>
Submit form
</b-button>
</Col>
</Row>
</BForm>
</template>