今年で一番冷や汗かいた

死んだね。
今日提出のファイルがあったので、その準備をしてたんですね。
最終確認ってことでフォームのテストをしてたんですよ。

今回はフォームを使う必要があって、もしかしたらPHPが使えないかもってことでフォームのミスチェックをjsでしてたんです。
使ったのは（多分）有名なvalidate.js！

jsでバッチリ動いてたのを前まで確認していたのですが、今日やったらなぜか動かないわけで。
もう提出の期限は1時間もなくて、冷や汗かきまくり。
意外と涼しくてエアコンが付いてなかったのもあってまさしく生き地獄。
久々に死ぬかと思いました。

20分もかけてようやく原因を特定し、無事提出することができましたが正直死ぬかと思いましたね。
おやおや？って状態からおやおやぁ！？！？！？ってなったわもう。

ほんま死ね。

原因について

validate.jsでは、存在しない要素をvalidateすることができません。
特にありそうなのが、フォームのラジオボタン。
最近は装飾を施すことが多くて、下のみたいに普通のやつとちょっと違うパターンが結構あります。

この程度なら30分もいりませんし、わりと簡単に色々できるのでデザイン上もそうなってることも多いです。

実はこれがvalidate.jsを使う上で問題になります。
このjsって、基本的に存在しない要素をvalidateすることは不可能なんですよね。
事実上述のcodepenで見てもらうと、ラジオボタンがdisplay:noneされてるかと思うのですが、こいつのせいで動いてなかったようなのです。

まあ攻略法は別にそんな難しい話ではなく、display:noneになっている部分をopacity:0で消してあげればいいだけの話です。
ただそれだと要素として存在してて変になってしまうので、今回はそこにheight:0とwidth:0をかけて完全に存在しないものとして扱うことにしました。
ひとまずはこれで動くようになったのでセーフです。

ちな

みに、上記したやり方で対応すると、ブラウザによっては変な見え方をしてしまう可能性があります。
例えばsafariとかな！！！！
多分このブラウザで見ると変な浮き方をしてしまっていると思います。
今日は何も言わずにオッケー！とか言いましたが実は全然オッケーじゃなかったりします。

どうしよ。

validate.jsは非常に便利なんですが、ここだけなんとも言えないっすよねー。
つーか面倒だからデザイナーはラジオボタンとかに装飾付けるのやめてクレメンス。

それでは今日はここらでサヨウナラー