saikoの日記帳

about

HTML5のvalidityにハマった話

勘弁して…

form部品

今日のハマった話はバリデーションです。
エラーチェックしてくれるやつ。

名前:

Email:

要は上みたいなやつのエラーチェックをしてくれる便利なやつ。
requiredを付けると必須項目になって、書いてないと送信ボタン押したときにエラーが出ます。
バリデーションチェックってやつです。

それでハマったのが今回のお話で、このinputくんは、html5で色々と便利になりました。
ぼくは全容を理解していませんが、少なくともバリデーションに関してはすごいことになってます。
html5かららしいです。

http://www.girliemac.com/blog/2012/12/01/html5-form-validation-jp/
http://qiita.com/leedohyung-dba/items/b762e21018edc4d0387c

この2つがすごく参考になりました。
今回やりたかったのは、setCustomValidity()を使ったエラー文言のカスタムです。

そもそもハマった原因

先に書いた2つのURL、そのうちの下の方のを元にして作ってました。
んで、ハマった内容としては、バリデーションチェックの場合分けです。
「~が~のときにエラーを出す」っていうのが詰まりました。

最初はセレクトアイテム。
どうやって何も選択されてない状態にエラーを出すのか。
valueを調べるとnullが返ってきたのでそれで判定しましたが、なぜかできない。
理由としては、送信ボタンを押しても判定はされないので、ずっとnullだったから。
結果、参考にしたもの、それのinputをselectに変えたらできました。
なんでやねん。

続いてメールアドレス。
通常時、html5では便利なことにバリデーションを3種類に分けてやってくれます。

・@がないとき
・@からアドレスが始まっているとき
・@で終わっているとき

これらは全部メールアドレスの形になっていないので、別々の文言が表示されます。
しかし、これらがどうやって判別されているのかわけわかめ。
んじゃsetCustomValidity()でやっても1つしかできねえじゃねえか!!!
と思ったんですが、if分で

・valueを取得してmatch使って@がvalueの中に見つからなかったとき
・valueをsliceして、@が1文字目に来ているとき
・valueをsliceして、@が一番最後に来ているとき

をif文で分けて、さっきの参考ソースにぶち込んだら無事通りました。
結局のところ、入力されたvalueを取得して判別するのが一番簡単だったという。
3時間掛けたんですよ!!!

最後にチェックボックス。
よくあるやつですが、「同意にチェックを押して次にお進みください」ってやつ。
チェックされてないときは何もしないでねってことです。

これ最初、checkedでチェック状態を取得したんですよ。
そうすればtrueとfalseで判別できるし。
しかし恐ろしいことに、セレクトアイテムと同じで、1回目しか取得しないんですよね。
なので延々と初期表示状態のfalseが返り続けるっていう。

結局、セレクトアイテムと同じでcheckboxのnameでinput部分書き換えたら通りました。
なんでやねん。

は?

という感じで、その3つが難題でした。
要は、何度も言ってる参考ソースの

$(“input”).each(function(index, elem){
中のソース
}

のinput部分を書き換えるだけで大体なんとかなったってことです。
メールアドレスに関してはif判定を自分で考えることになりましたけど。
それもネットに大体落ちてるもので、

var address_value = (formのvalue);
address_value = address_valu.slice(0, 1);

ってやれば一文字目だけを切れるので、それをif文で判定するだけ。
(address_value === “@”)みたいな感じで。
実に簡単なお話でした。
ほとんど考えてないですね。

結果としてはクリアできましたが、最終的に5時間ぐらい掛かりました。
正直取っ掛かりがなさすぎて、それに4時間ぐらい掛けた印象。
あ!ってなってから1時間で終わったような。
複数使うだけで解決する問題だったのにね。

今後、お問い合わせフォームとかで使うときがあるかもしれないので、日記で残しました。
ていうか絶対ある。

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

マギレコ CCが足りない!素材が足りない!

まだ配信始まって1週間も経ってないぞ

周囲のペースが早すぎる

おら、まどか覚醒したぞ。

随分と疲れましたが、覚醒終わりました。
まだマギアの強化は一切してません。
そっちはその内でいいかなって…。

はじまって数日ですけど、日々情報が刷新されていっています。
最初はまどか一強と言われ、今ではももこが人権と言われ。
どうせちょっとしたらまた評価は変わるので気にする必要なし!!
今の環境で「~が強い」とか言ってもふーんとしか思えないですし。

現状、☆5なら基本強いですが、覚醒がつらめです。
特にレインボーオーブ。
アレが覚醒の難度を跳ね上げているといっても過言ではなし。
そもそも1週間も経ってないので集めまわってるほうがおかしいんですけど。

ぼくの場合は、ひとまず虹オーブは置いといて他の素材を集めました。
立ち耳の綿が一番つらかったですが、オーブに比べれば断然マシ。
消費APもそう多くないので回復薬がぶ飲みしたらすぐ集まりました。
2時間ぐらい。

問題なのはCCですけど、強化超級回せば1周2万CC貰えるのでなんとかなるはず。
CCクエを待つのもいいと思いますけどね、どうせその内出るだろうし。
出るよね?

なんとか素材が集まり覚醒は終えたので、レベリング中です。
とっととイベントに専念したいので、本日中にはレベル100まで終える予定。
光の曜日ではありませんが、どうせなので終わらせます。
後になると面倒ですし。

残ってる問題はドッペル。
マギア5にするのも面倒だしエピソードレベル挙げるのも面倒だし。
これに関しては性能にダイレクトな直結をするってわけでもなさそうなので放置で。
PTの強化を考えるのなら、事前登録報酬のほむほむを覚醒させるのが良さそう。
多分頑張れば今週中か来週中には覚醒できると思うんですよね。
頑張れば。
多分そこまでのやる気はない。

なんだかんだで覚醒はなんとかなるようなので、安心してます。
噂では☆6とか☆7とか言われてますけど、どうなりますかね。
というか噂以前なレベルのことを気にしてもしょうがないとはわかっちゃいますが。
☆上限増えてそれがガチャでかつ前提になるような難易度クエが出たらやめます。

強化クエ周るぞ。

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

page-top