Bootstrap 4のフォームバリデーション
私はbootstrapの初心者ですが、bootstrap3のフォーム検証プラグインなどはたくさん見ましたが、bootstrap4用のものは見当たりません。
複数のフォームを検証しようとしているのですが、以下のようなコードになっています:
Contact
First Name
<input id="firstname" name="firstname" placeholder="First Name" class="form-control" type="text">
Last Name
<input id="lastname" name="lastname" placeholder="Last Name" class="form-control" type="text">
<input id="email" name="email" placeholder="E-Mail Address" class="form-control" type="email">
Phone #
<input id="phone" name="phone" placeholder="Phone" class="form-control" type="text">
Message
<textarea id="comment" class="form-control" name="comment" placeholder="Your Message">
3
5
まず、Jonathan Dionが提案したように、外部ライブラリを使って私の問題を解決しました。しかし、最近、私はこのような.NET Frameworkに出会いました:
Bootstrap v4.0では、独自のフォームバリデーションが導入されましたが、バックエンドのphpバリデーションと組み合わせることが可能です。Doc]2から:
そして、JS .NETを使用する:
これは、与えられたパターンやプロパティに従って、入力ボーダーの色付けや、有効/無効なフィードバックブロックの表示を行うものである。CSSの2つの擬似クラス、
:invalid
と:valid
によって適用されます。これは<input>
,<select>
,<textarea>
要素に適用されます。**jqueryvalidation]1を試してみてはいかがでしょうか。使い方はとても簡単で、ドキュメントを読むだけです。
input
に
required`属性を追加すれば、jqueryvalidationが仕事をしてくれます。スタイリングは、独自のCSSを追加して、bootstrapのような見た目にすることができます。お役に立てれば幸いです。
[デモ][2]です。
私のコードがバリデーションされない理由がわかりました:バリデーションのトリガーとなる送信ボタンがなかったのです。必ず設置してください。
ここにはライブラリーは実際には必要ありません。ネイティブの
reportValidation()
メソッドを使用できます:MDN。 個々の入力またはフォーム自体全体でそれを呼び出すことができます。Bootstrap 4 JS Form validationを実装するためのよりシンプルで少し現代的な方法を見つけました。
注:各
< form>
要素にはnovalidate
属性が必要であると同時に、各< input>
要素にはrequired
属性が必要であることに注意してください。。
。