バリデーション

Integration

usebootstrapのIntegration機能を利用すれば、scriptの記載無しでサーバー等からのデータ取得、表示、JsonSchema検証、Post更新などをコンポーネントのみで実現できます。

詳細は integration を確認してください。

JsonSchema

Looks good!

Please enter your email

first_name

Looks good!

Please enter your firstname

last_name

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"
   >
    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

フォーム検証メッセージの場合、 novalidate ブール属性をBForm に追加する必要があります。これにより、ブラウザのデフォルトのフィードバックツールチップが無効になりますが、JavaScript の form validation APIs へのアクセスは引き続き提供されます。

以下のフォームを送信してみてください。 JavaScript が送信ボタンをインターセプトし、フィードバックを中継します。送信しようとすると、フォームコントロールに適用された ：invalidおよび：validスタイルが表示されます。

カスタムフィードバックスタイルは、フィードバックをより良く伝えるために、カスタムカラー、ボーダー、フォーカススタイル、アイコンを適用します。 BFormSelect のアイコンは BFormSelect でのみ利用可能であり、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

カスタムバリデーションのフィードバックメッセージや、フォームの動作を変更するための JavaScript の記述はブラウザのデフォルト設定を使用することができます。

下記のフォームを送信してみてください。お使いのブラウザや OS によって、フィードバックのスタイルが若干異なります。

これらのフィードバックスタイルは CSS ではスタイリングできませんが、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

クライアントサイドのバリデーションを使用することを推奨しますが、スクリプトによるバリデーションが必要な場合には、validationとin-validを使用して、無効なフォームフィールドと有効なフォームフィールドを示すことができます。

BValidFeedback もサポートされていることに注意してください。

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

バリデーションスタイルは、以下のフォームコントロールとコンポーネントで利用できます。

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

フォームレイアウトが許すのであれば、BValidFeedback を BValidTooltip と入れ替えて、スタイル付きのツールチップにバリデーションのフィードバックを表示させることができます。

ツールチップの位置を決めるためには、 position: relative を持つ親を持つようにしてください。

下の例では、カラムクラスはすでにこれを持っていますが、あなたのプロジェクトでは別の設定が必要になるかもしれません。

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>

Bootstrap

バリデーション

Integration

JsonSchema

Custom styles

Browser defaults

Script Validation

Supported elements

Tooltips

See Also

フォーム

フォーム

セレクト

チェックとラジオ

レンジ

インプットグループ

フローティングラベル

レイアウト

Password Strength

ViewState

ActionState