Validation

Provide valuable, actionable feedback to your users with HTML5 form validation, via browser default behaviors or custom styles and JavaScript.

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.

Looks good!
Please enter your firstname
Looks good!
Please enter your lasttname
@
Looks good!
Please choose a username.
Looks good!
Please provide a valid city.
Looks good!
Please select a valid state.
Looks good!
Please provide a valid zip.
Looks good!
You must agree before submitting.
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.

@
Please select a valid state.
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.

Looks good!
Please enter your firstname
Looks good!
Please enter your lasttname
@
Looks good!
Please choose a username.
Looks good!
Please provide a valid city.
Looks good!
Please select a valid state.
Looks good!
Please provide a valid zip.
Looks good!
You must agree before submitting.
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:

Looks good!
Please enter a message in the textarea.
Looks good!
Example invalid feedback text
Looks good!
Example invalid feedback text
Looks good!
Example invalid select feedback
Looks good!
Example invalid select feedback
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.

Looks good!
Please enter your firstname
Looks good!
Please enter your lasttname
@
Looks good!
Please choose a username.
Looks good!
Please select a valid state.
Looks good!
Please select a valid state.
Looks good!
Please provide a valid zip.
Looks good!
You must agree before submitting.
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>

See Also