宮崎のWEB制作アドエス

HTML5でフォームのバリデーションを使ってみた話

2016.03.01

IEの旧バージョンのサポートが終わってしばらく経ちました。

そろそろ本格的にHTML5ですね!
 



 

時代は刻一刻と進んでおり、最近ではすっかり静的ページのみのサイトが減って来た気がします。

それに伴い、使う機会が減ってきたものがあります。

それは、form。

 

WordPressとか使う場合、formはまず間違いなくプラグインを使いますよね。

簡単だし、高機能だし、便利だし。

 

とはいえformを全く使わなくなったというわけではなく、デザインの整形にinput-typeを指定して形を作り、本番はプラグインを使うというのが主流です。つまりは枠だけcssで整えてる感じですね。

 

 

 

-shared-img-thumb-YOSX9768_TP_V

※画像は願望イメージです。(写真素材ぱくたそ

 

 

 

ところが今回、formを使う機会がやってきました。(バレバレ)

ご存知でしょうが、HTML5ってinput-typeを指定するだけで、ある程度のバリデーションがかかってます。(emailだと入力に@がないとエラーが出たりしますよね。)

 

1

こんな感じですね

 

 

 

さらにこれ、カスタマイズできます!

inputの中にチョロチョロっと書いてやれば、

3

こうなります!

 

 

 

やり方は簡単で、inputの中に2つ属性を追加するだけです。

1つめはこれ「pattern=”条件”」

書き方としては、”条件”に正規表現の条件を書くだけです。

例えば今回はemailなのでこんな感じです。

 pattern=”[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$”

この条件に合わない場合はエラーになります。

そして、そのエラー表示を決めるのがもう1つの属性です。

それは「title=”表示する文章”」

今回は

 title=”メールアドレスは、半角英数字、半角記号のメール形式で入力してください。”

これだけです。

お手軽ですね!

 

ついでに「必須条件」にしたい場合は「required」をつければOKです。

 

 

 

 

ただこれ、一部ブラウザでは動きません。

safariとかAndroidもダメみたいです。

なので、スマホはNG!

 

 

 

お手軽に使うには少し早かったみたいですね。

というわけでjQueryを探したらすぐ見つかりました。

「jQuery-Validation-Engine」

 

2

こんな感じでエラーが出ます

 

初期設定のままでもいいですが、エラーの表示位置やバリデーション条件などを追加することもできます。

あまり使う機会がなくなってきたformですが、もし使うことがあれば使ってみてはいかがでしょうか。