« HTML5 Hacks | トップページ | 這いよれ!ニャル子さん 本歌を探せ! »

2014.03.28

バリデーションをどこでやるのか?

いや、もちろんクライアントサイドとサーバサイドで両方チェックするんだけどね。
HTML5を考えながら、クライアントサイドでのチェックをどこにもたせるのかが、割合難しいなと感じる。

INPUT要素におけるnumber型によるmin/max指定とか、pattern属性とか、可能な限りJavaScriptを書きたくないのでユーザーエージェント側でやってくれるのならそれにこしたことはない。

しかしながらINPUT要素についてのIEのHTMl5対応具合がかなり遅れているのだな、ということを感じたもので・・・

IEはここについてはだいぶ遅れている様子。
Opera/Chromeはかなり進んでいて、Firefoxはまあまあ、という感じだった。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML Test world</title>
</head>
<body>
<form name="fm" method="post">
tel:<input type="tel" name="tel" /><br />
date:<input type="date" name="dt" autofocus /><br />
Order Qty:<input type="number" name="orderQty" min="1" max="100" required /><br />
PatternTest:<input type="text" name="orderQtytest" pattern="[0-9]{2}" /><br />
<input type="submit" name="" value="Yes!" /><br />
</form>
</body>
</html>

上記のようなHTMLを準備してテスト。

項目IE(Ver11)Firefox(V28)Chrome(V33)Opera(V20)
日付型(type="date")××
必須項目(required)×
数値型最大最小値××
オートフォーカス指定×
Pattern指定×

結果は上記。
基本的にIEは対応していない。Firefoxは半端な対応をしているので、この2ブラウザが私の環境では主力なので、まだHTMLにバリデーションをまかせる、という決断をするのはちょっと辛い感じである。
早いとこChrome/Operaクラスの対応をして欲しいものだ……

|

« HTML5 Hacks | トップページ | 這いよれ!ニャル子さん 本歌を探せ! »

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/2022/59366790

この記事へのトラックバック一覧です: バリデーションをどこでやるのか?:

« HTML5 Hacks | トップページ | 這いよれ!ニャル子さん 本歌を探せ! »