<input> — HTML5バリデーション属性
| 対応: | HTML5（2014） |
|---|
HTML5では、JavaScriptを使わずにブラウザ側で入力値を検証できるバリデーション属性が追加されました。数値の範囲・文字数・正規表現パターンなどをHTML属性だけで指定できます。
構文
<!-- 数値の範囲を制限 -->
<input type="number" name="age" min="0" max="120" step="1">
<!-- 文字数を制限 -->
<input type="text" name="name" minlength="2" maxlength="50">
<!-- 正規表現パターンで検証 -->
<input type="text" name="zip" pattern="[0-9]{3}-[0-9]{4}"
placeholder="123-4567">
<!-- メールを複数入力可能に -->
<input type="email" name="cc" multiple>
属性一覧
| 属性 | 概要 |
|---|---|
| min | 入力できる最小値を指定します。数値・日付タイプで有効です。 |
| max | 入力できる最大値を指定します。数値・日付タイプで有効です。 |
| step | 増減の刻み幅を指定します。数値スライダーの矢印クリック時の変化量にもなります。 |
| minlength | 入力できる最小文字数を指定します。テキスト系タイプで有効です。 |
| maxlength | 入力できる最大文字数を指定します。この文字数を超えて入力できなくなります。 |
| pattern | 入力値を検証する正規表現パターンを指定します。テキスト系タイプで有効です。 |
| multiple | emailタイプでカンマ区切りの複数アドレス入力、fileタイプで複数ファイル選択を可能にします。 |
サンプルコード
sample_input_validation.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>バリデーション属性</title>
</head>
<body>
<form>
<!-- 文字数制限 -->
<p>
<label for="uname">ユーザー名（2〜20文字）：</label>
<input type="text" id="uname" name="username"
minlength="2" maxlength="20" required>
</p>
<!-- 郵便番号のパターン検証 -->
<p>
<label for="zip">郵便番号（例：123-4567）：</label>
<input type="text" id="zip" name="zipcode"
pattern="[0-9]{3}-[0-9]{4}"
placeholder="123-4567"
title="ハイフンを含む7桁の数字で入力してください">
</p>
<!-- 数値の範囲とステップ -->
<p>
<label for="score">スコア（0〜100、5刻み）：</label>
<input type="number" id="score" name="score"
min="0" max="100" step="5" value="50">
</p>
<!-- 複数のメールアドレス -->
<p>
<label for="cc">CC（複数可、カンマ区切り）：</label>
<input type="email" id="cc" name="cc"
multiple placeholder="a@mail.com, b@mail.com">
</p>
<p><button type="submit">送信する</button></p>
</form>
</body>
</html>
実行結果
各入力欄に無効な値を入力して「送信する」を押すと、ブラウザのバリデーションエラーが表示されます。例えば郵便番号欄に「1234567」（ハイフンなし）を入力すると「123-4567 の形式で入力してください」というメッセージが表示されます。
概要
HTML5バリデーション属性を使うと、JavaScriptなしでブラウザが自動的に入力値を検証してくれます。エラーが発生した場合はフォームの送信がブロックされ、ユーザーにエラーメッセージが表示されます。『pattern』属性と合わせて『title』属性にエラー時のヒントメッセージを書いておくと、ユーザーにわかりやすい案内ができます。
ただし、ブラウザのバリデーションは開発者ツールやcurlで容易に回避できます。セキュリティ上重要な検証（文字数・形式・不正データなど）は必ずサーバー側でも行ってください。HTML5バリデーションはあくまでユーザーへのフィードバックを素早く返す「利便性の向上」として活用するものです。
数値の範囲制限（min/max）は『input type="number" / type="range"』と組み合わせて使うことが多いです。日付タイプの制限については『input type="date" 系』のページも参照してください。
対応ブラウザ
Chrome
4 以降 ○3 以前 ×
Firefox
4 以降 ○3 以前 ×
Safari
5 以降 ○4 以前 ×
Edge12 以降 ○
IE11 ○10 ○9 ×
8 ×7 ×
6 ×
Opera
12.1 以降 ○11.1 以前 ×
iOS Safari4 以降 ○3 以前 ×
Android Browser4.4 以降 ○4 以前 × Chrome Android最新版 ○ Firefox Android最新版 ○Constraint Validation APIとJavaScript
ブラウザ標準のConstraint Validation APIを使えば、JavaScriptでバリデーション状態を取得・カスタマイズできます。
<form id="signup-form" novalidate>
<div class="field">
<label for="email">メールアドレス</label>
<input type="email" id="email" name="email" required>
<!-- エラーメッセージ表示エリア -->
<span class="error-msg" id="email-error"></span>
</div>
<button type="submit">送信</button>
</form>
<script>
var form = document.getElementById('signup-form');
var emailInput = document.getElementById('email');
var emailError = document.getElementById('email-error');
form.addEventListener('submit', function(e) {
// novalidate を指定しているので手動でバリデーションする
if (!form.checkValidity()) {
e.preventDefault();
showErrors();
}
});
emailInput.addEventListener('blur', function() {
// 入力欄からフォーカスが外れたときにバリデーション
if (!emailInput.validity.valid) {
// validity.valueMissing: requiredで値が空
// validity.typeMismatch: type="email"でメール形式でない
if (emailInput.validity.valueMissing) {
emailError.textContent = 'メールアドレスを入力してください';
} else if (emailInput.validity.typeMismatch) {
emailError.textContent = '正しいメールアドレスの形式で入力してください';
}
emailInput.setAttribute('aria-invalid', 'true');
} else {
emailError.textContent = '';
emailInput.setAttribute('aria-invalid', 'false');
}
});
function showErrors() {
var inputs = form.querySelectorAll('input, select, textarea');
inputs.forEach(function(input) {
if (!input.validity.valid) {
// setCustomValidity() でカスタムエラーメッセージを設定できる
input.reportValidity();
}
});
}
</script>
『novalidate』をformタグに指定するとブラウザのデフォルトバリデーションUIを無効化できます。JavaScriptで完全にカスタムなバリデーションUIを実装したい場合に使用します。
記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。
シェアする