Bootstrap 5 フォームバリデーション

フォームバリデーション

ユーザーに価値のあるフィードバックを提供するために、異なるバリデーションクラスを使用できます。以下を .was-validated または .needs-validation を <form> 要素に追加します。フォームを送信する前にまたはその後でバリデーションフィードバックを提供するかによって異なります。入力フィールドには緑色（有効）または赤色（無効）の枠線が表示され、フォームに欠けている内容を示します。さらに、以下の追加もできます。 .valid-feedback または .invalid-feedback メッセージを使用して、ユーザーに何が欠けているか、またはフォームを送信する前に何を完了する必要があるかを明確に伝えるために。

例

この例では、フォームを送信する前に使用 .was-validated 何が不足しているかを示す：

<form action="/action_page.php" class="was-validated">
  <div class="mb-3 mt-3">
    <label for="uname" class="form-label">ユーザー名：</label>
    <input type="text" class="form-control" id="uname" placeholder="ユーザー名を入力してください" name="uname" required>
    <div class="valid-feedback">有効です。</div>
    <div class="invalid-feedback">このフィールドを入力してください。</div>
  </div>
  <div class="mb-3">
    <label for="pwd" class="form-label">パスワード：</label>
    <input type="password" class="form-control" id="pwd" placeholder="パスワードを入力してください" name="pswd" required>
    <div class="valid-feedback">有効です。</div>
    <div class="invalid-feedback">このフィールドを入力してください。</div>
  </div>
  <div class="form-check mb-3">
    <input class="form-check-input" type="checkbox" id="myCheck" name="remember" required>
    <label class="form-check-label" for="myCheck">これらの条項に同意します。</label>
    <div class="valid-feedback">有効です。</div>
    <div class="invalid-feedback">このチェックボックスを選択して続行してください。</div>
  </div>
  <button type="submit" class="btn btn-primary">提出</button>
</form>

自分で試してみる