HTML5のフォームでパターンを使用するといろいろと問題が。

javascriptやcgiでパターンを書くよりhtml5で書いたほうが楽じゃないか。
なんて軽い気持ちで使ったら痛い目に。

実際に使ったinputのpatternは↓

pattern="^[0-9a-zA-Z]+[\w-._+]+@[\w\.-]+\.\w{2,}$"

何が痛い目にかって？
windows10のChromeを使うとエラーがでます。
エラー内容は「指定された形式で入力してください」。

windows7やiphone、androidでは起きないんですけどね。

数字のみ↓このパターンも曲者です。

pattern="^[0-9A-Za-z]+$"

androidで数字以外を入れてしまった場合、例えば「15か所」とか。
普通に送れてしまいます。
送られた内容はブランクで届きます。

「HTML5　フォーム パターン」でググるといろいろなサイトが引っ掛かりますが、実際にエラー検証をしているサイトは少ない。
OSのせいなのかブラウザーのバージョンアップのせいなのか不明だけど、いきなり使えなくなることも考えると、使うのは避けたほうがいいです。

html5はいろいろと楽な部分がありますが、その分十分に検証をしないと、実際に使うのは怖いですね～。