Navigate
X
    itsysgroup
  • 7年 ago
    • Categories: HTML5

HTML5 数値の入力フィールド　バリデーションチェック

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 数値の入力フィールド　バリデーションチェック」の簡単なチェックでした。

Tags: HTML5
itsysgroup: