フォームのバリデーション(required・pattern)

このレッスンでは、requiredやpatternを使ったフォームバリデーションの基本を学び、JavaScriptなしで入力チェックができるようになることを目標にします。「HTML フォーム バリデーション」で調べている方向けです。

required属性を付けると入力必須になり、pattern属性で正規表現に合う入力だけを許可できます。JavaScriptを書かなくても、ブラウザが自動でチェックしてくれる「入力の門番」のような機能です。

サンプルコードでは、名前の入力欄にrequiredを、郵便番号の入力欄にpattern="\d{3}-\d{4}"という正規表現を指定しています。実際に送信ボタンを押してみると、条件を満たさない入力に対してブラウザが自動的に警告メッセージを表示してくれる様子を確認できます。

初心者がよくつまずくのが、こうしたHTML標準のバリデーションだけでは、実務のセキュリティ対策としては不十分な点です。ブラウザ側のチェックは簡単に迂回できてしまうため、サーバー側でも必ず同じような入力チェックを行う必要があります。

会員登録フォームでメールアドレスの形式が違うと送信できない、といった動作の多くはこの仕組みによるものです。ユーザーの入力ミスをその場で防げるため、使いやすいフォームを作るうえで欠かせない基本知識です。