validate.jsではdisplay:noneした要素をvalidateできない

今年で一番冷や汗かいた

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

今回はフォームを使う必要があって、もしかしたら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は非常に便利なんですが、ここだけなんとも言えないっすよねー。
つーか面倒だからデザイナーはラジオボタンとかに装飾付けるのやめてクレメンス。

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

関連記事

デフォルト画像
2017.06.28
WebFont LoaderくんがwebフォントのFOUT問題を解決してくれた話

WebFont Loader 昨日のちらつき、読み込み速度問題が本日解決いたしました。 その立役者となってくれたのでWebFont Loaderくんです。 ネットをひたすら調べてたら結構出てきた単語だったので調べてみました。 どうやら話によれば、Webフォントの読み込みイベントを実装してくれるらしい。 つまり、 ①ローディングしてるとき ②ローディングが終わったとき ③ローディングに失敗したとき とかを判定してくれるらしい。 これを使ってFOUTとかいうクソ問題を解決している人が多いらしい。 ほんとかよとか思いながら使ってみました。 font-familyで源ノ明朝を読み込んで、後はJSで制御するだけ。 よく見ると、JS以外は全部普通にWebフォント使う手順なんですよね。 使い方とかを書く気はないので気になる人は調べてね。 効果 これで解決できる問題は、再描画によるフォントのちらつき。 ブラウザによってはWebフォントを読み込むまで代替フォントを出すんですよ。 そんで読み込み終わったらそのフォントをWebフォントに差し替えると。 ぼくが差し掛かってた問題はこの辺が大きくて、基本的にブラウザは HTML→JS→CSS→画像・フォント (詳しい人からすれば違うかもしれないけど) (所謂DOMツリーとかそういう?レンダリングする順番みたいな?よくわかんねえ) って順番で読み込んでいるみたいだったので、その上フォントが重すぎて時間がかかっていたと。 上の順番のHTMLからCSSまでで既に1秒ぐらい掛かってたわけで。 そこにフォントがWait+コンテンツロードで5秒とか追加されてたんですね。 そうなるとレンダリングが完了するまでに6,7秒掛かると。 ブラウザによってデバイスフォント表示の時間とか規約が違うのでそこも困りごとでした。 IEなんて常に代替フォント表示し続けやがるし。 そういうのを今回のプラグインが解決しました。 フォントのロードイベントを判定できるので、ロード完了までVisibility: hidden掛けるだけ。 しかも優秀なのは、その判定がCSSでできてるってことですよ。 なのでこっちはCSSで自動付与される.wfなんちゃらにhiddenかければ解決。 終わったらvisibleに切り替えると。 ただ、別にページが見えるまでの速度をなんとかしてくれるわけじゃないんですよね。 なのでWebfontloader側でsettimeoutの時間を伸ばさないでいたら代替フォントが出てきました。 初期値は3000みたいなので、思い切って10000くらいまで伸ばして解決。 めっちゃ問題起きそうだけど、オッケー貰ったからオッケー。 源ノ明朝滅べ 嫌いじゃないんですけど、今回みたいな問題が起きるのが辛いです。 単純にフォント容量が大きいだけなんですけども。 しかもまだ出たばかりで、CDNとかも用意されてないんですよね。 いやCDNにした所でどれくらい変わるのか知りませんけど。 ちなみに、ちらつきの方は解決したんですが、容量はどうにもなりませんでした。 最終的に第一水準漢字と第二水準漢字を含めたサブセット化をして終了。 今回フォントを使うサイトではかなりこぼれた漢字があったのでその辺は手作業で対応。 今後のことを考えなければすべて円満に解決しました。 まあ2週間後とかに追加コンテンツが出てくるんですけどね、その辺はしーらない。 というわけでして、なんとか今日中に終わらせることができましたよ。 なんだかんだ来週までとか無理だろとか思ってましたけど、良かったです。 次font-familyとか使うときは、対象のフォントのサブセット化を許可してほしい。 軽くさせろ。 それでは今日はここらでサヨウナラー

2019.11.22
11月22日(金) 飲み屋でルートビアを見つける

飲む 沖縄料理をメインにしてる飲み屋に誘われたので行きました。奢りだとか言われちゃそりゃ行くしかねえすんわ。ザース!アザース! 中で何食ったかは置いといて(全部美味しかった❤) なぜか飲み屋にルートビアがあったので頼んでみました。 …?なんか思ってたんと違うな…。 匂いを嗅いでみても思った以上に普通。あのルートビアの変な匂いがしない。 ひとくち飲んでみて違和感、普通。あのルートビアのよくわからん湿布みたいな味がしない…。 いや、わかってるんですよ。飲み屋で普通に提供されてる以上、普通に飲めるものなんだろうなって。でもさ、ほら、あのヴィレヴァンにあったよくわからん飲み物的な印象があるじゃん?あのなんとも言えない「湿布ジュース」とか言われたアレを想像するじゃん? 普通じゃん…。 君誰だよ…。 料理は全部美味しかったのですが、ルートビアが普通に美味しく飲めるルートビアだったので悲しかったです。缶が悪いのかコイツが悪いのか。

2019.10.15
文字列の省略は「shave」を使うというライフハック

悩んでないでプラグイン使ってホラ webやってると、文字列の省略を求められることがあるんですよね。そういうときの解決策としては、IEを切り捨てていいのなら真っ先にCSSの-webkit-line-clampとかが選択肢に現れます。ただ、大抵のクライアントはIEくんの救済を求めてきます。 「IEだと三点リーダーが出ないんですけど、これバグですか?」 オメェの頭がバグってんだよ!!!!その小せえ脳みそ使ってIEのシェアについて考えてみろや!!! ということも言えるはずもないので四苦八苦、口八丁、あの手この手でのらりくらりと解決するはず。 そんなことしねぇで、よほどの事情がない限りはプラグイン使おうぜ。 Shave jsで上手く文字列省略を実現してくれるのがshaveくんです。この前見つけて使ってみて案外使いやすかったです。 shavehttps://dollarshaveclub.github.io/shave/ shave - githttps://github.com/dollarshaveclub/shave ダウンロードしたファイルを解凍して「dist > jquery.shave.js」が目的のブツになります。ぼくはjQueryに頼らないと生きていけない人間なので、jquery.shave.jsを使います。 使い方は至極簡単で、誰もが知ってるjqueryを何らかの方法で読み込んだ後、そのままの勢いで上記のjquery.shave.jsも読み込んでください。 デモhttps://saikofall.com/test/shave/ 一応デモ用でページ作ってぽいっとしました。この3つのデモは下のソースで動いています。 あら簡単。1番目と2番目の違いは、ウィンドウサイズを小さくしたり大きくしたりするとわかると思います。わからない人はセンスのない人です。何年ネットサーフィンして生きてきたの? jQueryで使うつもりなら、指定したい要素にshave(高さ)という関数を与えれば動きます。リサイズとかで動くようにすれば更に良い感じになるんじゃないですかね。(ぼくはそうしてる) 数値は高さを指定する形になるので、基本は高さ固定です。そもそも省略するときは大体高さ固定だし、多少はね? 注意点 軽い説明記事みたいになりましたが、注意点があります。これ、多様すると多分重くなると思います。中身解析してみたわけではないので一概には言えませんが、jsでの文字省略って結構重かった気がするんですよね。しかもshave自体、2,3年前とかの古いプラグインだし…。 ページ内の要素で3つ4つぐらいをresizeでかけるぐらいなら大丈夫だと思います。実際、最近そういうのをやったときは問題なく動いたんで。 まだ試してはいませんが、今度どのあたりが限界点になるのか試してみたいと思ってます。リサイズするたびに止まるぐらいには重くなると思うんだよな…。 まあ、個人的には多ブロックでも使えて死ぬほど使いやすく思ってるのでメモもかねて説明記事にしました。自分の引き出しにできれば最の高ってやつで。 それでは今日はここらでサヨウナラー