空のまま送られてきた、メールアドレスの欄に「あ」と書かれていた——入力チェック（バリデーション）は、HTMLの属性を足すだけでかなりの部分をブラウザに任せられます。まずそこから始めましょう。
HTMLの属性だけでできること
<form>
<label for="name">おなまえ</label>
<input type="text" id="name" name="name" required>
<label for="email">メールアドレス</label>
<input type="email" id="email" name="email" required>
<label for="zip">郵便番号</label>
<input type="text" id="zip" name="zip" pattern="\d{3}-\d{4}" placeholder="123-4567">
<button type="submit">おくる</button>
</form>これだけで、空欄のまま送信しようとするとブラウザが止めて教えてくれます。
| 属性 | 何をチェックするか |
|---|---|
required | 空でないこと |
type="email" | メールアドレスの形をしていること |
type="url" | URLの形をしていること |
type="number" + min / max | 数であること、その範囲内であること |
minlength / maxlength | 文字数の下限・上限 |
pattern="…" | 決めた形に合っていること（正規表現） |
CSSで「合っている／間違っている」を見せる
ブラウザは、入力の状態に応じてスタイルを当てられるようにしてくれています。
input:user-invalid {
border-color: #e5484d; /* 入力後に不正なら赤 */
}
input:user-valid {
border-color: #3aa76d; /* 入力後に正しければ緑 */
}JavaScriptで独自のチェックを足す
「パスワードの確認欄が一致しているか」のように、HTMLの属性では書けないチェックはJavaScriptで足します。
const form = document.querySelector("#signup");
const pass = document.querySelector("#pass");
const confirm = document.querySelector("#confirm");
form.addEventListener("submit", function (event) {
if (pass.value !== confirm.value) {
event.preventDefault();
document.querySelector("#error").textContent = "パスワードが一致しません";
}
});ブラウザ標準の吹き出しに独自の文言を出したいときは、setCustomValidity()を使います。
confirm.addEventListener("input", function () {
if (confirm.value !== pass.value) {
confirm.setCustomValidity("パスワードが一致しません");
} else {
confirm.setCustomValidity(""); // 空にすると「問題なし」に戻る
}
});入力チェックは「安全のため」ではない
伝わるエラーメッセージの書き方
同じエラーでも、書き方で親切さが変わります。
| ✕ 突き放す | ○ 次の行動が分かる |
|---|---|
入力エラー | メールアドレスの形を確認してください |
不正な値です | 郵便番号は123-4567の形で入れてください |
必須 | おなまえを入れてください |
- どこが問題なのか（欄の近くに出す）
- 何が期待されているのか（形・文字数）
- どうすれば直るのか
この3つが入っていれば十分です。入力した内容を消さないことも大切で、エラーのたびに全部消えるフォームは最後まで書いてもらえません。
アクセシビリティフォームには必ずラベルをラベルと入力欄の結びつけ方はこちらで扱っていますべんりワザ問い合わせフォームを本当に送れるようにするチェックを通ったあと、実際に送れるようにする方法はこちらまとめ
- まずはHTMLの属性（
required・type・pattern）。書くだけでブラウザが確認してくれる - 見せ方は
:user-invalidと:user-valid。色だけでなく文字でも伝える - ブラウザ側のチェックは親切であって安全対策ではない。受け取る側の検証が本番
入力チェックの丁寧さは、そのままフォームを最後まで書いてもらえる率になって返ってきます。