m
TAKEU YOSHIHARA
京都のスタートアップで働くプロダクトデザイナーです。NotaInc.という会社でGyazoScrapboxを作っています。 ものづくり、旅や山が大好きです。
2018.11.18

Bootstrapのformのバリデーション

Bootstrapのフォームのバリデーションについてメモ。

HTMLのデフォルトのバリデーション

inputのrequired属性をtrueにした場合、条件を満たしていないinput要素に関しては:invalidの擬似クラスが適用される。その上で送信ボタンを押した際には、エラーメッセージが表示される。この仕様の問題は、もし自分で:invalid擬似クラスに対してスタイルを当てた場合、条件を満たしていないinput要素は常にinvalide状態で表示されてしまうということ。理想としては、[submit]ボタンを押した後にinvalidが適用されることが望ましい。

See the Pen Required input by Takeru Yoshihara (@mountainboooy) on CodePen.

Bootstrapでは

上記の問題を解消するためにBootstrapではsubmitボタンを押してバリデーションが完了した場合のみ、input要素の:invalidに当てたスタイルが有効になる方法を用意している。方法は簡単。submitボタンが押されたタイミングで.was-validatedクラスをformに追加するというもの。(これは自分で実装しなければならない。)

See the Pen Required input with Bootstrap by Takeru Yoshihara (@mountainboooy) on CodePen.

ref : https://getbootstrap.com/docs/4.1/components/forms/#validation

RELATED POSTS

POPULAR POSTS