web-dev-qa-db-ja.com

Bootstrap 4で検証が機能しない

私は Bootstrapによる検証 を有効にしようとしています。そして、私のページのfollownigサンプルに貼り付けました。

<div class="form-group has-success">
  <label class="form-control-label" for="inputSuccess1">Input with success</label>
  <input type="text" class="form-control form-control-success" id="inputSuccess1">
  <div class="form-control-feedback">Success! You've done it.</div>
  <small class="form-text text-muted">Example help text that remains unchanged.</small>
</div>

入力コントロールの外観が変更されたことがわかります（少し丸みを帯び、より美しくなりました）、しかしそれでも緑は表示されませんリンク先のページに表示されるボーダー。リンクしているBootstrapは次のように指摘されています。

<link rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" />

問題をグーグルアーチしようとすると、サンプルを入手した公式サイトにリンクしている例にしか到達しないので、そこに役立つことはほとんどありません。 問題を説明するフィドル があります。

私はそれについて何ができますか？私は何が欠けていますか？

htmlcsstwitter-bootstrapvalidationbootstrap-4
18
user1675891

検証は Bootstrap 4ベータリリース の時点で変更されました。

有効な状態セレクターは、client-sideJavaScriptを介してフォームを検証した後に動的に追加されるwas-validatedクラスを使用します。例えば...

<form class="container was-validated" novalidate="">
    <div class="form-group">
        <label class="form-control-label" for="inputSuccess1">Input with success</label>
        <input type="text" class="form-control" name="i1" id="inputSuccess1">
        <div class="valid-feedback">Success! You've done it.</div>
    </div>
    <div class="form-group">
        <label class="form-control-label" for="inputSuccess2">Input with danger</label>
        <input type="text" class="form-control" name="i2" required="" id="inputSuccess2">
        <div class="invalid-feedback">That didn't work.</div>
    </div>
    <div class="">
        <button type="submit" class="btn btn-secondary">Text</button>
    </div>
</form>

https://www.codeply.com/go/45rU7UOhFo

2018を更新-Bootstrap 4.0.0
フォーム検証のサンプルデモ

ドキュメントで説明されているように、server-side検証を使用する場合は、is-validまたはis-invalidフォームコントロールのクラス...

<form class="container">
    <div class="form-group">
        <label class="form-control-label" for="inputSuccess1">Input with success</label>
        <input type="text" class="form-control is-valid" id="inputSuccess1">
        <div class="valid-feedback">Success! You've done it.</div>
    </div>
</form>
28
Zim

Bootstrap 4の最終リリースバージョンで検証の変更が再び表示されます： http://getbootstrap.com/docs/4.0/components/forms/#validation 。

思ったよりも複雑になります。

カスタムスタイルのクライアント側検証が推奨されます。

  1. 検証されると、フォームはwas-validatedという名前のクラスを追加します。
  2. フィードバックメッセージは、.valid-feedbackまたは.invalid-feedback内にラップされます。

サーバー側の検証の場合：

  1. was-validatedタグの<form>クラスは不要です。
  2. 入力コントロールに.is-validまたは.is-invalidを追加します。
  3. フィードバックメッセージに.invalid-feedbackまたは.valid-feedbackを追加します。
9
Blaise