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

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

関連記事

デフォルト画像
2018.07.13
クソデカ本棚が届きました

自立はしてる 本棚くんが届きました。 この前ベルライムとかいう店で買った中古家具です。 お値段は(メール会員様限定)5,000円! 安ゥい! いや、でかすぎるんだわ…。 天井に届きそうなレベルってどんだけやねん。 縦に大きすぎるせいか、わりとギリギリな状態で自立してます。 何が言いたいかって、天井との間に突っ張り棒つけたりして固定しないといかんほど。 下手するとこのままなにかの拍子に倒れてくる可能性すらあります。 床も本もCDも傷つくからやめてくれよな~??? なんか大きすぎて無限に入っていくんじゃねえのってぐらいなので、暫く眺めて楽しみます。 いやあ部屋の中に棚が増えてまいりました。 本が着々と増えているので、靴箱も本用に解禁する必要が出てきているという恐怖を感じています。 本が増える悦び。 それでは今日はここらでサヨウナラー

デフォルト画像
2020.02.24
クリエイティブ性能が低すぎてフロントエンド職の適正が高まらない

ド深夜のエントリー。転職して~~~~~~~~!? ただの愚痴みたいな将来の不透明性みたいな。 求められるデザイン性 そろそろ今の職業続けて3年間経ったと思う。そもそも2月頃バイトで入ってたし実質3年。フロントエンドエンジニア3年やった。 コーダーから入ってフロントエンドの領域色々やってるわけだけど、そもそもフロントエンドエンジニアって何よ。 フロントエンドエンジニアとは?HTMLコーダーとの違いや役割 https://html-coding.co.jp/knowhow/about_coder/front-end-engineer/ およそ5年前の記事だけど、まあ今も大体こんな感じ。 さて、3年続けて大体わかってきたことだけど、フロントエンドの人間はある程度デザイン性能を求められるわけで。別にガッツリデザインしろって話ではなく(それは専門職がいるから)、部分部分で必要な要素をこっちで補完する必要がある。 一言で言ってしまえば「そこそっちで良い感じにしといて」っていう話。 特にこれが求められるのがアニメーションとかの細かい動き。デザイナーは「終点」は示すけど、そこに至るまでの「道中」までは指示しない。これも具体的に言うと、「要素をホバーした時のデザイン」はあっても、「ホバーするまでの動き」は指示書にはない。だからそこはなんとかこっちで埋めないといけない。 なんでこっちでそこまでやんなきゃいけねえんじゃとは思うけども、そこまで指示してたら仕事になんないし…。逆に、そこを楽しめるんならなんも問題ない。 多分だけど、世の中の上級フロントエンドエンジニアはデザイナーとしての側面も持ってる人が多いんだろうなと。ていうかむしろデザイナーからこっちの領域に足を踏み入れる人が結構いる。そうなるとそいつらの独壇場で、フロントのコーディングもできてデザインもできてって、そりゃ無敵よ。勝てる道理がねえべ。 だからってわけかそうじゃないかなんとも言えないけど、フロントエンドエンジニアはある程度のデザイン力が求められる。(ここでのデザイン力は、ひとつのデザインを作る能力じゃなくて見えない部分を補完する能力) 生きてけねえよって話 ぼくの場合は、デザインのインプットが完全に0だからアウトプットもできないんだよね。基本的にデザイン苦手だし。 とはいえ、WEB業界におけるデザインは勉強すればなんとかなる世界だったりする。およそ勘違いされやすいのが、デザインとアートの違いについて。学校とかで工学の授業受けたりすればわかるけど、デザインはセンスじゃなくて引き出しの数が強さ。アートなんて門外漢だし知らんけど、デザインなら実はインプットとアウトプットを繰り返して勉強すればなんとかなるもの…だと思う。 そんなこと言ったところで、じゃあ今からそれやりますか?って言われても絶対やらんけど。 会社の人と話してて面白かった話で、「デザイナーは基本コーディングを嫌う」。このあたりはぼくがデザインを嫌う理由と大体同じで、なんとなく無理ってだけ。なんかつまらんらしい。ぼくからすればデザインのほうがよほどつまらんけど。下手なりにアニメーション考えて実装してるほうが楽しいわ。 話が脱線、要は ・フロントエンドエンジニアで生きてくにはデザイン力はある程度必要でしょ・デザインなら色んなの見て引き出し増やして勉強すれば大体解決する・今からやる?無理! っていうぼくの状態を語りたかっただけです。 いやー、実際無理よ。今からデザインやれって言われたら会社逃げ出すわ。だって無理でしょ!?!?!? ぼくが裸足で逃げ出す、それがデザインだね!!! 逃げてもいられん でも流石に逃げてばっかりじゃどうしようもない。奇跡的にぼくが今の若い感性のまま30,40と歳を重ねていけるんなら、同世代を叩き落とすこともできるのかもしれん。まあでもそんなことはまず無理だろうので、感性がある程度若いうちに逃げ場を作る必要があるのね。 そんなこんなで最近考えてるのがCSSアニメーションとか。理想的な流れとしては、 ・CSSアニメーションがちょっと楽しいからやってみる・引き出しを増やすために良い感じの動画とか動きのあるサイトを見る・デザインの引き出しが増える→なんかいつの間にかフロントとしての提案力も身についてる~~~~!? という完璧なもの。これはもう勝ち確定未来が光り輝く黄金パターン。 つーことでCSSアニメーションやってるけどダメだわ、わかんね。何が良いのか悪いのか正直判断つかんしどうしようもねえな。 やればやるほど自分の無能さが目について逆に気持ちよくなってくる気がする。マジで最高にクソで楽しいな。 M3終わるまでは、関連した事柄で色々忙しいんでアレだけど、終わったら本格的にCSSアニメーションで遊んでいこうかなって考えてたりする。具体的には、アニメーションの引き出しを増やしていきたい。 そのためにはまず今中途半端な状態になっちゃってるポートフォリオを完成させたいんだわ。アレ一応CSSアニメーションガリガリ動かして作る予定だから。完成したら結構良い感じに慣れると思うんだよなあ。 この仕事も3年経ったということで、そろそろ本格的に特化した技術身につけようとしてたりなんだり。でも楽しくねえもんは絶対やりたくねえから、ちょっと面白そうなCSSアニメーションを頑張ろうな。 誰か今サイト作ってほしい人いないの?身内でもいいからぼくの作品リストのひとつとして載せるから話くれ。

デフォルト画像
2019.05.12
ダイドードリンコ ぷるシャリ温州みかんゼリーが復活してた

復活!ぷるシャリゼリー復活! やりましたね! とうとうみかんゼリーが復活してましたよ! ただの振って飲むゼリー飲料水なんですが、これが大変美味しいのです。 去年も同じ内容を投稿した気がするんですが、大変美味しいのです。 しかし、去年の夏には既になくなっていたという…。 季節が外れたからですね、多分。 そんなわけで来年も出るだろうと待っていたのですが、本当に来てました。 先日近くの清水フード(イオンの魔の手に落ちたクソザコスーパー)に行ったのですよ。 ふら~とカゴすら持たずにブラブラして惣菜とか見てたんですね、意味もなく。 「今日は何もなしだな…」と何も買わずに帰ろうとするカス客(ぼく)。 その客の眼の前に現れた!ダイドードリンコ ぷるシャリ温州みかんゼリー!! ダイドードリンコ ぷるシャリ温州みかんゼリー!!! ダイドードリンコ ぷるシャリ温州みかんゼリー!!!!!!!!!!!! やったぜ! 冷静になったぼくは2本買って帰りました。 その日のうちにどちらもなくなりましたが。 そんな風に興奮する程度には好きなんですよね、これ。 何が好きなんでしょうね、ぼくもよくわかんないです。 ただ、ペットボトル飲料水と同じぐらいの値段、同じ量のゼリー飲料水が飲めるっていう点はかなりの強みです。 これでマンゴーとかだったらヤバかった(多分箱買いしてた)。 でもみかんだからまだ自制が効くわけです(去年は箱買いしようとしてた)。 色んなスーパーをチラチラと見ていますが、今の所は清水フードにしかなかったですね。 しかもなんかパイナップル味とかいう変なのも別に新作として出てたし…。 アレは明らかに外れ臭がするので手を出しません。 ぼくは賢いので。 みんなも見つけ次第飲もうな。 それでは今日はここらでサヨウナラー