【Bootstrap フォームのバリデーション】Bootstrapを使ってフォームのバリデーションをする方法

bootstrapでフォームのバリデーションの仕方
バリデーションありのフォームを作りたいな~

 

そんな方向けの記事です。

ティロ

こんにちは、ティロといいます。

Bootstrapを使ってバリデーション付きのフォームを作ってみます。




「Bootstrapってなんぞや?」という方はこちらの記事をご覧ください。

関連記事

Bootstrapってなに?Bootstrapの基本的な使い方が知りたい ティロこんにちは、ティロといいます Bootstrapを使うと何が良いのか、また基本的な使い方[…]

bootstrapの導入から使い方

 

Bootstrapをcdnで読み込む

以下のコードをhead内に貼り付けてください。

 

 

バリデーションありのフォーム

バリデーション自体はhtmlの機能を使っています。

アイコンはawesomeiconを使っており、head内に以下のコードを貼り付けてください。

 

See the Pen
yLJWddB
by hiro web制作とブログ (@hiroweb9)
on CodePen.


コードは以下の通りです。

出典:Validation (バリデーション) – Bootstrap5 日本語リファレンス

requiredをつけると必須項目となります。

またfor=”validation1″とid=”validation1″のようにforとidは同じにします。

フォームの基本的な使い方(クラスの意味など)はこちらの記事にまとめました。

関連記事

お問い合わせのフォームが作りたいなそんな時はBootstrapでサクッと作りましょう。作り方は簡単で指定のクラスをつけるだけです。「Bootstrapってなんぞや?」という方はこちらの記事をご覧ください。[s[…]

フォームのサムネイル

またBootstrapでよく使うグリッドシステムもとても便利なのでオススメです!

いかがでしたでしょうか?

Bootstrapの機能をもっと知りたい!という方はこちらの書籍がおススメです。

Bootstrapの機能はほぼ載っています。