Bootstrapのformのバリデーション
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
- 2015-05-09
巷で大人気のチャットツール、slackのUIを舐めてみた。あまり詳細な部分は見れてない。
- 2013-08-06
友人が運営するイベントに誘われ面白そうなので参加してきた。36時間で新しい照明を作り出すハッカソン、Design Loves Engineering。面識のないデザイナーとエンジニアがその場でチームを編成し、その後2日間で照明を作り出そうというイベントだ。開催場所のFabLab Kitakagayaはレーザーカッターや3Dプリンターを備えた実験工房。
- 2015-04-22
AlfredやFlashlightが便利なのでUIを考察してみた。Alfredは以前からよく使われているMac用のランチャーアプリ。FlashlightはYosemite用Spotlightのプラグインで最近評判がいい。
- 2015-04-19
WebおよびモバイルアプリのUIデザインをやることになりそうなので、モックアップツールを調べた。どうやらUI用のモックツールは以下の2種に大別されるらしい。ここにシンプルにまとまってた。
- 2015-05-28
自分はwebデザインの素人だ。とはいえ、今後はプロダクトのwebデザインに手をつける必要がありそうだ。なので最近のwebページのレイアウトをざっくりトレースしてみた。トップページのみ。
- 2015-05-12
普段使っているRSSリーダアプリfeedlyのUIを検証してみた。普段はデスクトップアプリをメインに使っている。
- 2018-11-09
iOSのふらっとデザインがなぜうまく作用するのかを考えた。出てきた当初は使いづらかった。今はうまく使える。
- 2015-05-24
プロトタイプツールのHype3が超便利なの感想をメモ。
- 2015-04-18
テレビでフォーリーアーティストとやらの特集をやっていた。フォーリーアーティストは映画の音を作る人たちのこと。驚いたことに映画の音の80%くらいは別途作成されて後で追加されるらしい。その製作方法がとても面白くてハマってしまった。
- 2018-11-21
理論的を詰めて作ったデザインが魅力的にならないことがある。どんなに「正しいもの」を作ったとしても、最終的に「良い印象」がなければゴールに辿りつくこはない。
- 2017-01-27
以前作った海外向けの新幹線の予約サービスを大幅に更新してみた。デザインを更新し、サイト内での支払いを可能にした。
- 2014-04-18
グランフロント大阪のイノベーションハブにて催されたTechCrunch主催のハッカソン。テーマがIoTだったので興味を惹かれて参加。良いチームにも恵まれ色々と発見ができたイベントだったので内容を記録。
POPULAR POSTS
- 2015-12-26
ふと思い立ってウルトラライト仕様のバックパックを自作した。理由は自分の物欲に対する反抗だ。最近流行のガレージブランドのバックパックなんかを見てるととてもカッコよくて物欲を掻き立てれられる。でもそれをそのまま買うのは人生の楽しみとしてちょっと違う気がする。
- 2019-03-20
- 2014-12-07
モバイルアプリでAmazonの商品を扱うためのAPIについて調べてみた。アプリ内で購入まで完結させる機能もある。商品が売れればアプリの開発者は最大6%のマージンを受け取ることができる。この内容を見るとすごく魅力的。
- 2019-03-01
- 2018-11-09
iOSのふらっとデザインがなぜうまく作用するのかを考えた。出てきた当初は使いづらかった。今はうまく使える。
- 2012-02-12
今更ですが、急遽ブログを書くことに決めました。大学院の卒業を間近にして進路を選択している今、常に自分の情報を発信し続けることの必要性をかなり強く感じたから。テーマは決めてません。感じた内容を綴ればそのうち傾向が出てくるでしょう。ちゃんと続けばね・・・
- 2014-11-16
2014年9月8日 Marry Lake → Evolution Meadow 起床 6:30 気温5℃
昨晩は雨が降った。ポツポツとテントの中で嫌な音を聞いて飛び起き、靴を中に入れてもう一度寝た。この時期のシエラは95%が晴れ。でも5%は雨なのだ。
今日は3回目の補給地、ミューア・トレイル・ランチを目指す。1000mほどの下り行程。 珍しく湿気がある。林の中の湖でうっすらと霧が立って幻想的だ。昨晩一緒にキャンプを張った3人組が湖畔でまったり休憩していた。3人くらいで歩くのっていいなあ。いつか釣り道具を持って、仲のいい友人と湖畔でキャンプを張って、コーヒー飲みながらまったり過ごそう。
- 2012-04-17
こんな便利なサービスあったのですね。iftttは各webサービスを連結させるためのwebサービス。facebokやtwitter、evernoteなど各サービスの連携をiftttで全て管理可能。驚いたのはUIで、メタファーとデザインが絶妙にシンプルで分かりやすく、初めて見る人でも簡単に使えてしまう。サービス①の「トリガー」とサービス②の「アクション」を設定することで自分の求める「タスク」が完成します。タスクは他の人が作成したものが沢山の「レシピ」として用意してあり、そこから使うこともできます。
- 2014-11-16
2014年9月7日 Lake Thomas A Edison → Marry Lake 起床 6:20 気温9℃ 朝起きてまず焚き火。 昨日見かけたパーティに倣った。松の葉に火をつけてあっという間に燃え始める。パチパチ音を立てて暖かい。やっぱり朝もコーヒーが欲しいなあ。これまではコーヒーなんてほとんど飲まなかったのに妙に恋しい。
- 2019-04-30
- 2014-11-22
2014年9月9日 Evolution Meadow → 2mile from Helen Lake 起床 7:00 気温0℃
寒い。あまり眠れなかった。テントの中は結露。シュラフカバーの内側も結露。最悪だ。 それでも日が出ていつものように1時間ほど日に当てると7割くらいは乾いてしまう。シエラの強烈な日差しのおかげ。
- 2014-11-23
2014年9月9日 2mile from Helen Lake → Palisade Lakes
寒い。日が当たりにくいので寒い。日なたが降りてくる前の水汲みは辛い。まだ遠い日なたの境目を見ながら、早く降りてこいと願う。