HTML5 入力項目のチェックを行うサンプル

HTML5の入力項目のチェックを行うサンプルです。

確認環境
・Windows 10
・Google Chrome

目次

テキストボックスで必須チェックを行う

未入力でボタンを押すとエラーメッセージが出ます。

コード

上記サンプルのコードです。

<form name="form1" onSubmit="return test1()">
	<input type="text" id="input1" value="" maxlength="5" required>
	<input type="submit" value="ボタン">
</form>

2行目は、テキストボックスにrequired属性が付いています。
submitボタンを押した時に未入力の場合、デフォルトのメッセージが表示されます。

 

チェックの成否に応じてCSSで反映させる

未入力のときは、背景色がつきます。入力されると文字に色がつきます。

コード

上記サンプルで使用しているCSSです。

<style>
#input1:valid {
	color:red;
} 
#input1:invalid {
	background:LightGrey;
}
</style>

2行目の:validは、成功のときに実行されます。文字の色が変化します。
#test1はセレクタでCSSを適用する場所を指します。
5行目の:invalidは、失敗のときに実行されます。入力欄の背景色が変わります。

 

数値入力欄で数値の下限と上限のチェックを行う

指定した数値より小さい、または大きい場合はエラーメッセージが表示されます。

5から7の数値を入力して下さい。

コード

上記サンプルのコードです。

<p>5から7の数値を入力して下さい。</p>
<form name="form3" onSubmit="return test1()">
	<input type="number" id="input3" value="1" max="7" min="5" maxlength="5">
	<input type="submit" value="ボタン">
</form>

2行目は、type="number"で数値入力欄です。
minは最小値です。5にしています。maxは最大値です。7にしています。それより小さいまたは大きい数値の場合はデフォルトのエラーのメッセージが表示されます。

 

メール入力欄でアドレスの妥当性チェックを行う

メール入力欄でアドレスの妥当性チェックを行うサンプルです。

コード

上記サンプルのコードです。

<form name="form4" onSubmit="return test1()">
	<input type="email" id="input4" maxlength="25" value="test">
	<input type="submit" value="ボタン">
</form>

2行目は、type="email"でメール入力欄です。
メール形式でない場合は、エラーのメッセージが表示されます。

URL入力欄でURLの妥当性チェックを行う

URLが妥当でない場合エラーメッセージが表示されます。

コード

上記サンプルのコードです。

<form name="form5" onSubmit="return test1()">
	<input type="url" id="input5" maxlength="30" value="test">
	<input type="submit" value="ボタン">
</form>

2行目は、type="url"でURL入力欄です。
URL形式でない場合は、エラーのメッセージが表示されます。

 

テキストボックスで正規表現のチェックを行う

指定の文字ではない場合はエラーメッセージが表示されます。

redまたはblueと入力して下さい。

コード

上記サンプルのコードです。

<p>redまたはblueと入力して下さい。</p>
<form name="form6" onSubmit="return test1()">
	<input type="text" id="input5" maxlength="4" pattern="red|blue" value="test">
	<input type="submit" value="ボタン">
</form>

3行目は、patternを使用しています。正規表現を使用できます。redまたはblueという文字を指定しています。

以下は、MDNのフォームデータの検証のリンクです。
https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Data_form_validation

関連の記事

HTML5 プログレスバーの動きを表示するサンプル(progress)
HTML5 入力欄に入力候補を表示するサンプル(datalist)
HTML5 スライダーで数値を入力するサンプル(range)
HTML5 上下ボタン(スピナー)で数値を入力するサンプル(number)
HTML5 クリックして詳細情報を開く/閉じるサンプル(detailsとsummary)

△上に戻る