« 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 | トップページ | 這いよれ!ニャル子さん 本歌を探せ! »

コメント

コメントを書く



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




トラックバック


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

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