HTML5 数値の入力フィールド バリデーションチェック
HTML5から実装されているHTML5 数値の入力フィールドのバリデーションチェックを試してみました。
今更ながらなのですが。。。
もともと必要ならjavascriptを使って自前で組み込んでいたのですが、どの程度使えるのかと思って。
簡単な入力チェックならこれで十分な気がします。
下に試したHTMLを貼っておくので試してみては如何でしょうか？
ちなみに、ブラウザによって微妙な違いが出るかもしれませんので、そのあたりのチェックもした方が良いと思われます。
下のHTMLは単純な数値の入力フィールド、小数点の数値の入力フィールド、範囲を指定した数値の入力フィールドの3つを試しています。
送信ボタンをクリックするとバリデーションチェックが行われ、問題が有ればメッセージが表示されます。
問題がなければ送信されてクリアされます。
なので、入力中にチェックをしたいのならこのバリデーションチェックを使うことができません。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;" />
<title>test</title>
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
alert("テスト開始！入力フィールドに数値以外が入るとバリデーションチェックが入ります。");
});
</script>
<style type="text/css">
</style>
</head>
<body>
<form>
<div>
テスト
</div>
<fieldset>
<LEGEND>数値の入力フィールド</LEGEND>
<label></label>
<p><label><input type='number' name='number'></label></p>
<label></label>
</fieldset>
<fieldset>
<LEGEND>小数点の数値の入力フィールド</LEGEND>
<label></label>
<p><label><input type='number' name='number1' step='0.1'></label></p>
<label></label>
</fieldset>
<fieldset>
<LEGEND>範囲を指定した数値の入力フィールド</LEGEND>
<label>1～99まで</label>
<p><label><input type='number' name='number1' min='1' max='99'></label></p>
<label></label>
</fieldset>
<p><button type='submit'>送信</button></p>
</form>
</body>
</html>
以上、「HTML5 数値の入力フィールド バリデーションチェック」の簡単なチェックでした。
