フォームバリデーションを実装する方法をわかりやすく解説！コピペできるコード付き

フォームの管理者の中には「フォームバリデーションを実装する方法が分からない」と頭を抱えている方も多いのではないでしょうか？

結論から言うと、HTML5、JavaScript、jQueryを使って、対応するコードを挿入すれば、フォームバリテーションを実装可能です。

そこで、本記事ではフォームバリデーションに関する基本的な知識を踏まえて、HTML5、JavaScript、jQueryを使ってフォームバリデーションを行う際のコードなどをご紹介します。

また、フォームバリデーション機能が豊富なフォーム作成ツールを使用したい場合、フォーム作成ツール「formrun」がおすすめです。formrunを使用すると下記の6つのメリットがあります。

フォームバリデーション機能が豊富
リアルタイムエラー（自動）、半角自動変換、住所自動入力機能が利用できる
ワンクリックでrecaptcha設定可能
マウス操作でデザイン設定可能
お問い合わせ管理、メール対応も可能
自動メールやChatworkなどツール通知までついている

以上の機能が完備されており、基本料金は無料です。
ビジネス用フォーム作成ツール「formrun」では、「複数人でデザイン性の高いフォーム」を管理ができます。

またformrunではユーザーに親切なフォームを作成するために必要なEFO機能が搭載されています。

EFO機能について詳細を確認する

フォームバリデーション（チェック）とは？
フォームバリデーション（チェック）の重要性
フォームバリデーション（チェック）を行う方法3選
HTML5を使ってフォームバリデーション（チェック）を行う際のコード7選
JavaScriptを使ってフォームバリデーション（チェック）を行う際のコード
jQueryを利用してフォームバリデーション（チェック）を行う際のコード7選
フォーム作成ツール「formrun」もおすすめ！
フォームバリデーションを効率化したい場合EFO対策が充実しているformrunの利用を検討しましょう

フォームバリデーション（チェック）とは？

そもそもフォームバリデーション（チェック）とは、どういう意味なのでしょうか？結論から言うと、フォームバリデーションは、ユーザーがフォームに入力した値が正しい値であることをチェックすることを言います。

フォームバリデーションを実装すれば、ユーザーはフォームに入力した値が正しい値で無いことを理解し、正しい値を再入力します。よって、フォームに誤った値が記載されたまま、送信されることを防ぐことが可能です。

具体的には下記のような形式で正しい値が入力されていないことをユーザーに伝えます。

このフィールドは入力必須です
電話番号は‐（ハイフン）を含む形で入力してください
メールアドレスは＠を含む形で正しく入力してください

フォームバリデーション機能が実装されていれば、上記のようにユーザーに正しい値の入力をうながすことができます。

フォームバリデーション（チェック）の重要性

フォームバリデーションを実装すれば、ユーザーに正しい値の入力をうながすことができます。しかし、正しい値をユーザーが入力できることで具体的にどのようなメリットがあるのでしょうか。

フォームバリデーションを実装する重要性は下記の通りです。

ユーザーの情報を正確かつ安全に取り扱える
不正なデータの入力を防ぎ、アプリケーションの動作を守る
ユーザーに安全なパスワードの入力をうながせる

フォームバリデーションを実装していなければ、悪意のあるユーザーがアプリケーションの動作に危害を加えるために、不正な値を記入する可能性があります。

そのため、管理者がフォームを守るためにも、ユーザーの個人情報を守るためにも、フォームバリデーションは重要です。

フォームバリデーション（チェック）を行う方法3選

フォームバリデーションを行う方法は下記の3つです。

HTML5を使ってフォームバリデーションを行う
JavaScriptを使ってフォームバリデーションを行う
jQueryを使ってフォームバリデーションを行う

自社が運用しているフォームの言語にあわせて、それぞれの方法を参照し、フォームバリデーションを実装しましょう。

HTML5を使ってフォームバリデーションを行う

HTML5を使ってフォームバリデーションを行う場合、主に下記のような値のチェックができます。

フィールドの入力必須
メールアドレスの書式確認
URLの書式確認
数値の最大値・最小値を指定
文字列の文字数を指定
ファイルの拡張子を制限
正規表現を使って入力値のパターンを指定

JavaScriptを使ってフォームバリデーションを行う

JavaScriptを使ってフォームバリデーションを行う場合は、最低限のバリデーションであれば、標準のJavaScriptで実装できます。具体的には下記のような値をチェックできます。

フィールドの入力必須
電話番号の書式確認
メールアドレスの書式確認
パスワードの書式確認
件名・お問い合わせ内容の文字数を指定

jQueryを使ってフォームバリデーションを行う

jQueryを使ってフォームバリデーションを行う場合、下記のような値をチェックできます。

数値の入力形式
メールアドレスの書式確認
電話番号の書式確認
郵便番号の書式確認
URLの書式確認
パスワードの書式確認
ひらがな・かたかなの指定

formrunならコードを書くことなく入力文字数に上限を決めることやメールアドレスの入力で「＠」を含む形式なのかを確認できます。ぜひ、formrunでフォームを作成してみてください。

EFO機能の詳細を確認する

HTML5を使ってフォームバリデーション（チェック）を行う際のコード7選

HTML5を使ってフォームバリデーション（チェック）を行う際のコード7選をご紹介します。本記事でご紹介するフォームバリデーションのコードは下記の通りです。

フィールドを入力必須にする際のコード
メールアドレスの書式を検証する際のコード
URLの書式を検証する際のコード
数値の最大値・最小値を指定する際のコード
文字列の最大文字数・最小文字数を指定する際のコード
ファイルの拡張子を制限する際のコード
入力値のパターンを正規表現で指定する際のコード

①HTML5を使ってフィールドを入力必須にする際のコード

HTML5を使ってフィールドを入力必須にする際は、required属性を指定する必要があります。具体的には下記のコードを挿入すれば、フィールドを入力必須にできます。

<input type="text" name="message" required />

上記のコードを挿入すれば、ユーザーが入力必須のフィールドを空白のままフォームを送信しようとした場合、「このフィールドは入力必須です」のような文言が表示され、ユーザーに再入力をうながします。

②HTML5を使ってメールアドレスの書式を検証する際のコード

HTML5を使ってメールアドレスの書式を検証する際は、input type=”email”のコードを挿入します。具体的には下記のようにコードを挿入しましょう。

<input type="email" name="email" />

上記のコードを挿入すれば、メールアドレスに「＠」が含まれていない場合など、有効なメールアドレスが入力されていなければ、メールアドレスの再入力をユーザーにうながすことができます。

③HTML5を使ってURLの書式を検証する際のコード

HTML5を使ってURLの書式を検証する際は、input type=”url”のコードを挿入します。具体的には下記のようにコードを挿入しましょう。

<input type="url" name="website" />

上記のコードを挿入すれば、有効なURLが入力されていない場合、ユーザーに有効なURLの再入力をうながすことができます。

④HTML5を使って数値の最大値・最小値を指定する際のコード

HTML5を使って数値の最大値・最小値を指定する際は、input type=”number”のコードを挿入して、max属性とmin属性で最大値・最小値を指定します。具体的には下記のようにコードを挿入しましょう。

<input type="number" name="age" max="12" min="6" />

上記のコードを挿入すれば、ユーザーに最大値・最小値の指定の範囲内で数値を入力することをうながすことができます。

⑤HTML5を使って文字列の最大文字数・最小文字数を指定する際のコード

HTML5を使って文字列の最大文字数・最小文字数を指定する際は、maxlength属性とminlength属性を指定します。具体的には下記のようにコードを挿入しましょう。

<input type="text" name="message" minlength="5" />
<textarea name="message" maxlength="140"></textarea>

上記のコードを挿入すれば、ユーザーに最大文字数・最小文字数の範囲内で文字を入力することをうながすことができます。

⑥HTML5を使ってファイルの拡張子を制限する際のコード

HTML5を使ってファイルの拡張子を制限する際は、accept属性で許可するファイルのMIMEタイプおよび拡張子を指定します。具体的には下記のようにコードを挿入しましょう。

<input type="file" accept=".jpg,.gif" />

上記のコードを挿入すれば、ファイルの拡張子のタイプを制限できます。

⑦HTML5を使って入力値のパターンを正規表現で指定する際のコード

HTML5を使って入力値のパターンを正規表現で指定する際は、pattern属性で、入力値のパターンを正規表現で指定しましょう。具体的には下記のようにコードを挿入しましょう。

<!-- 例）半角英数字 -->
<input type="text" pattern="^[0-9A-Za-z]+$" />

上記のコードを挿入すれば、使用する文字のパターンを指定できます。

JavaScriptを使ってフォームバリデーション（チェック）を行う際のコード

JavaScriptを使ってフォームバリデーションを行う際は下記のコードを挿入しましょう。

下記のコードを挿入すれば、名前、電話番号、メールアドレス、パスワード、値の再入力、件名、お問い合わせ内容に関するバリデーションのチェックができます。

// お問い合わせフォームの送信イベントを取得
document.getElementById("contactForm").addEventListener("submit", function(e) {

// 各入力フィールドの値を取得
const name = document.getElementById("name").value;
const phone = document.getElementById("phone").value;
const email = document.getElementById("email").value;
const password = document.getElementById("password").value;
const passwordConfirm = document.getElementById("passwordConfirm").value;
const subject = document.getElementById("subject").value;
const message = document.getElementById("message").value;

// 名前の検証: 未入力、または10文字を超える場合はエラー
if (!name || name.length > 10) {
alert("名前を正しく入力してください。");
e.preventDefault(); // フォームの送信をキャンセル
return;
}

// 電話番号の検証: 数字とハイフン以外の文字を含む場合はエラー
const phonePattern = /^[0-9\-]+$/;
if (!phone.match(phonePattern)) {
alert("正しい電話番号の形式で入力してください。");
e.preventDefault();
return;
}

// パスワードの検証: 二つのパスワードフィールドの値が一致しない場合はエラー
if (password !== passwordConfirm) {
alert("入力されたパスワードが一致しません。");
e.preventDefault();
return;
}

// 件名の検証: 未入力、または30文字を超える場合はエラー
if (!subject || subject.length > 30) {
alert("件名を正しく入力してください。");
e.preventDefault();
return;
}

// お問い合わせ内容の検証: 未入力、または200文字を超える場合はエラー
if (!message || message.length > 200) {
alert("お問い合わせ内容を正しく入力してください。");
e.preventDefault();
return;
}
});

formrunならコードを書くことなく簡単に入力文字数に上限を決めることやメールアドレスの入力で「＠」を含む形式なのかを確認できます。ぜひ、formrunでフォームを作成してみてください。

formruのEFO機能を確認する

jQueryを利用してフォームバリデーション（チェック）を行う際のコード7選

jQueryを使ってフォームバリデーション（チェック）を行う際のコード7選をご紹介します。本記事でご紹介するフォームバリデーションのコードは下記の通りです。

数値の入力形式を検証する際のコード
メールアドレス検証する際のコード
電話番号を検証する際のコード
郵便番号を検証する際のコード
URLを検証する際のコード
パスワードを検証する際のコード
ひらがな・かたかなを検証する際のコード

①jQueryを利用して数値の入力形式を検証する際のコード

jQueryを利用して数値の入力形式を検証する際は、下記のコードを挿入しましょう。

$('#myForm').on('submit', function(event) {
event.preventDefault();
var input = $('#myInput').val();

// 数値（全角・半角）の正規表現
var regex = /^[0-9０-９]*$/;

if (regex.test(input)) {
$('#errorMessage').text('');
this.submit();
} else {
$('#errorMessage').text('数値（全角・半角）のみを入力してください。');
}
});

上記のコードを挿入すれば、数値の全角・半角を指定できます。

②jQueryを利用してメールアドレス検証する際のコード

jQueryを利用してメールアドレスを検証する際は、下記のコードを挿入しましょう。

$('#myForm').on('submit', function(event) {
event.preventDefault();

var email = $('#myInput').val();
var regex = /^[\w.-]+@[\w.-]+\.[a-zA-Z]{2,}$/;

if (regex.test(email)) {
$('#errorMessage').text('');
this.submit();
} else {
$('#errorMessage').text('正しいメールアドレスの形式を入力してください。');
}
});

上記のコードを挿入すれば、ユーザーに正しいメールアドレスの形式を入力するようにうながすことができます。

③jQueryを利用して電話番号を検証する際のコード

jQueryを利用して電話番号を検証する際は、下記のコードを挿入しましょう。

$('#myForm').on('submit', function(event) {
event.preventDefault();
var input = $('#myInput').val();

// 日本の電話番号の正規表現 (固定電話、携帯、フリーダイヤル、IP電話を考慮)
var regex = /^(0[5-9]0[-(]?[0-9]{4}[-)]?[0-9]{4}|0120[-]?\d{1,3}[-]?\d{4}|050[-]?\d{4}[-]?\d{4}|0[1-9][-]?\d{1,4}[-]?\d{1,4}[-]?\d{4})*$/;

if (regex.test(input)) {
$('#errorMessage').text('');
this.submit();
} else {
$('#errorMessage').text('有効な電話番号を入力してください。');
}
});

上記のコードを挿入すれば、電話番号が正しい形式で記載されているか検証できます。

④jQueryを利用して郵便番号を検証する際のコード

jQueryを利用して郵便番号を検証する際は、下記のコードを挿入しましょう。

$('#myForm').on('submit', function(event) {
event.preventDefault();
var input = $('#myInput').val();

$('#myForm').on('submit', function(event) {
event.preventDefault();
var input = $('#myInput').val();

// 日本の郵便番号の正規表現（全角・半角、ハイフンあり・なし）
var regex = /^(?:\d{3}-?\d{4}|[０-９]{3}-?[０-９]{4})$/;

if (regex.test(input)) {
$('#errorMessage').text('');
this.submit();
} else {
$('#errorMessage').text('正しい郵便番号を入力してください。');
}
});

上記のコードを挿入すれば、郵便番号が正しい形式で記載されているか検証できます。

⑤jQueryを利用してURLを検証する際のコード

jQueryを利用してURLを検証する際は、下記のコードを挿入しましょう。

$('#myForm').on('submit', function(event) {
event.preventDefault();
var input = $('#myInput').val();

// URL（https・http）の正規表現
var regex = new RegExp('^(https?:\\/\\/)?'+
'(([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}'+
'(\\/[-a-z\\d%_.~+]*)*', 'i');

if (regex.test(input)) {
$('#errorMessage').text('');
this.submit();
} else {
$('#errorMessage').text('有効なURLを入力してください。');
}
});

上記のコードを挿入すれば、URLが正しい形式で記載されているか検証できます。

⑥jQueryを利用してパスワードを検証する際のコード

jQueryを利用してパスワードを検証する際は、下記のコードを挿入しましょう。

$('#myForm').on('submit', function(event) {
event.preventDefault();
var input = $('#myInput').val();

// 半角数字のみの正規表現
var regex = /^\d+$/;

if (regex.test(input)) {
$('#errorMessage').text('');
this.submit();
} else {
$('#errorMessage').text('半角数字のみを入力してください。');
}
});

上記のコードを挿入すれば、入力されたパスワードが正規表現にマッチするか検証できます。

⑦jQueryを利用してひらがな・かたかなを検証する際のコード

jQueryを利用してひらがな・かたかなを検証する際は下記のコードを挿入しましょう。

$('#myForm').on('submit', function(event) {
event.preventDefault();
var input = $('#myInput').val();
// ひらがな・カタカナ（全角・半角）の正規表現
var regex = /^[\u3040-\u309F\u30A0-\u30FFｧ-ﾝﾞﾟ]*$/;

if (regex.test(input)) {
$('#errorMessage').text('');
this.submit();
} else {
$('#errorMessage').text('ひらがな・カタカナ（全角・半角）のみを入力してください。');
}
});

上記のコードを挿入すれば、ひらがな・かたかなの入力値が正しいか検証できます。