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時間で終わったような。
複数使うだけで解決する問題だったのにね。

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

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

page-top