HTML5からinputタグに幾つもの属性が追加されています。
その属性を使用して簡単に入力チェックが行えます。
これら使用すれば簡単な入力チェックもJavascriptを書く必要がなくなります。

typeでチェックを行う

HTML5になって様々なtypeが追加されました。

下記は現在「Opera 26.0」で確認出来た入力チェックがかかるtypeの一覧です。
※他にも新たに追加されたtypeがあります。
わざと間違った値をいれて頂いて送信ボタンをクリックすると入力エラーが表示されます。

type	サンプル
email
url
number
date
datetime-local
month
week
time

入力必須の要素

inputタグに新たに追加された「required」要素を使用します。
この要素を使用すれば入力必須と出来ます。

<form onsubmit="return false;">
	ID:<input type="text" name="id" required /> ※入力必須<br />
	<input type="submit" value="送信">
</form>

未入力のまま送信ボタンを教えてみてください。

ID: ※入力必須

正規表現で指定する

inputタグに新たに追加された「pattern」要素を使用します。
この要素を使用すれば正規表現で入力の値をチェックすることが出来ます。

<form onsubmit="return false;">
	ID:<input type="text" name="id" pattern="^[0-9A-Za-z]+$"> ※半角英数のみ<br />
	<input type="submit" value="送信">
</form>

ID: ※半角英数のみ

その他、type=”number”の場合はminとmaxの属性を指定したりしてチェックを行うことが可能です。
特に計算等を必要としない入力チェックの場合はこれで簡単にチェックを行うことが可能になります。
まぁ、ただHTML5でのエラー出力が特徴的だから全面的に使用するとなるとエラー出力のUIで問題が起きそうな予感です・・・


«前の記事：jQueryで指定の要素内の入力値を一括取得する方法HTML5を使用して自動的に送信ボタンの状態を変更する方法：次の記事»