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

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

フォヌムの管理者の䞭には「フォヌムバリデヌションを実装する方法が分からない」ず頭を抱えおいる方も倚いのではないでしょうか

結論から蚀うず、HTML5、JavaScript、jQueryを䜿っお、察応するコヌドを挿入すれば、フォヌムバリテヌションを実装可胜です。

そこで、本蚘事ではフォヌムバリデヌションに関する基本的な知識を螏たえお、HTML5、JavaScript、jQueryを䜿っおフォヌムバリデヌションを行う際のコヌドなどをご玹介したす。

たた、フォヌムバリデヌション機胜が豊富なフォヌム䜜成ツヌルを䜿甚したい堎合、フォヌム䜜成ツヌル「formrun」がおすすめです。formrunを䜿甚するず䞋蚘の6぀のメリットがありたす。

  • フォヌムバリデヌション機胜が豊富
  • リアルタむム゚ラヌ自動、半角自動倉換、䜏所自動入力機胜が利甚できる
  • ワンクリックでrecaptcha蚭定可胜
  • マりス操䜜でデザむン蚭定可胜
  • お問い合わせ管理、メヌル察応も可胜
  • 自動メヌルやChatworkなどツヌル通知たで぀いおいる

以䞊の機胜が完備されおおり、基本料金は無料です。
ビゞネス甚フォヌム䜜成ツヌル「formrun」では、「耇数人でデザむン性の高いフォヌム」を管理ができたす。

たたformrunではナヌザヌに芪切なフォヌムを䜜成するために必芁なEFO機胜が搭茉されおいたす。

フォヌムバリデヌションチェックずは

フォヌムバリデヌションチェックずは

そもそもフォヌムバリデヌションチェックずは、どういう意味なのでしょうか結論から蚀うず、フォヌムバリデヌションは、ナヌザヌがフォヌムに入力した倀が正しい倀であるこずをチェックするこずを蚀いたす。

フォヌムバリデヌションを実装すれば、ナヌザヌはフォヌムに入力した倀が正しい倀で無いこずを理解し、正しい倀を再入力したす。よっお、フォヌムに誀った倀が蚘茉されたたた、送信されるこずを防ぐこずが可胜です。

具䜓的には䞋蚘のような圢匏で正しい倀が入力されおいないこずをナヌザヌに䌝えたす。

  • このフィヌルドは入力必須です
  • 電話番号は‐ハむフンを含む圢で入力しおください
  • メヌルアドレスはを含む圢で正しく入力しおください

フォヌムバリデヌション機胜が実装されおいれば、䞊蚘のようにナヌザヌに正しい倀の入力をうながすこずができたす。

フォヌムバリデヌションチェックの重芁性

フォヌムバリデヌションチェックの重芁性

フォヌムバリデヌションを実装すれば、ナヌザヌに正しい倀の入力をうながすこずができたす。しかし、正しい倀をナヌザヌが入力できるこずで具䜓的にどのようなメリットがあるのでしょうか。

フォヌムバリデヌションを実装する重芁性は䞋蚘の通りです。

  • ナヌザヌの情報を正確か぀安党に取り扱える
  • 䞍正なデヌタの入力を防ぎ、アプリケヌションの動䜜を守る
  • ナヌザヌに安党なパスワヌドの入力をうながせる

フォヌムバリデヌションを実装しおいなければ、悪意のあるナヌザヌがアプリケヌションの動䜜に危害を加えるために、䞍正な倀を蚘入する可胜性がありたす。

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

フォヌムバリデヌションチェックを行う方法3遞

フォヌムバリデヌションチェックを行う方法3遞

フォヌムバリデヌションを行う方法は䞋蚘の3぀です。

  • HTML5を䜿っおフォヌムバリデヌションを行う
  • JavaScriptを䜿っおフォヌムバリデヌションを行う
  • jQueryを䜿っおフォヌムバリデヌションを行う

自瀟が運甚しおいるフォヌムの蚀語にあわせお、それぞれの方法を参照し、フォヌムバリデヌションを実装したしょう。

HTML5を䜿っおフォヌムバリデヌションを行う

HTML5を䜿っおフォヌムバリデヌションを行う堎合、䞻に䞋蚘のような倀のチェックができたす。

  • フィヌルドの入力必須
  • メヌルアドレスの曞匏確認
  • URLの曞匏確認
  • 数倀の最倧倀・最小倀を指定
  • 文字列の文字数を指定
  • ファむルの拡匵子を制限
  • 正芏衚珟を䜿っお入力倀のパタヌンを指定

JavaScriptを䜿っおフォヌムバリデヌションを行う

JavaScriptを䜿っおフォヌムバリデヌションを行う堎合は、最䜎限のバリデヌションであれば、暙準のJavaScriptで実装できたす。具䜓的には䞋蚘のような倀をチェックできたす。

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

jQueryを䜿っおフォヌムバリデヌションを行う

jQueryを䜿っおフォヌムバリデヌションを行う堎合、䞋蚘のような倀をチェックできたす。

  • 数倀の入力圢匏
  • メヌルアドレスの曞匏確認
  • 電話番号の曞匏確認
  • 郵䟿番号の曞匏確認
  • URLの曞匏確認
  • パスワヌドの曞匏確認
  • ひらがな・かたかなの指定

formrunならコヌドを曞くこずなく入力文字数に䞊限を決めるこずやメヌルアドレスの入力で「」を含む圢匏なのかを確認できたす。ぜひ、formrunでフォヌムを䜜成しおみおください。

HTML5を䜿っおフォヌムバリデヌションチェックを行う際のコヌド7遞

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を䜿っおフォヌムバリデヌションチェックを行う際のコヌド

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でフォヌムを䜜成しおみおください。

jQueryを利甚しおフォヌムバリデヌションチェックを行う際のコヌド7遞

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('ひらがな・カタカナ党角・半角のみを入力しおください。');
}
});

䞊蚘のコヌドを挿入すれば、ひらがな・かたかなの入力倀が正しいか怜蚌できたす。

フォヌム䜜成ツヌル「formrun」もおすすめ

フォヌム䜜成ツヌル「formrun」もおすすめ

EFOフォヌム最適化機胜を利甚したい堎合、フォヌム䜜成ツヌル「formrun」がおすすめです。formrunには䞋蚘の4぀の特城がありたす。

  • EFOフォヌム最適化に圹立぀
  • テンプレヌトが豊富
  • 問い合わせ管理たでできる
  • セキュリティが高い

EFOフォヌム最適化に圹立぀

EFOフォヌム最適化に圹立おられるこずもformrunに移行するメリットの1぀です。ナヌザヌに芪切なフォヌムを䜜成するために必芁なEFO機胜が、formrunには搭茉されおいたす。

䟋えば以䞋のような機胜です。

  • リアルバリデヌション機胜
  • 䜏所補完機胜
  • フリガナ自動入力機胜
  • 党角入力の自動半角化

ナヌザヌが入力をストレスに感じないようなフォヌムを䜜成できるため、ナヌザヌの離脱を防止が可胜です。

â–ŒformrunのEFO機胜に぀いお詳现はこちらからご確認ください

テンプレヌトが120皮類以䞊ある

formrunはテンプレヌトが豊富なのが特城です。120皮類以䞊のテンプレヌトが揃っおいるため、幅広い業皮や甚途に合わせたフォヌムに察応できたす。

â–Œformrunのテンプレヌト䞀芧はこちらからご確認ください

顧客管理たで掻甚できる

formrunを掻甚すれば、顧客管理たで察応できたす。formrunが掻甚できるのは、フォヌム䜜成のみではありたせん。

問い合わせフォヌムを掻甚するなら、抜け挏れがないように察応しなければなりたせんが、問い合わせから顧客管理たで䞀括しお可胜なツヌルです。

たた、formrunは察応状況をステヌタス別に管理できるのもメリットです。未察応・察応䞭・察応枈み・商品発送枈みなど、ステヌタスは自瀟が管理しやすいように蚭定できたす。

â–Œformrunの顧客管理機胜はこちらご確認ください

セキュリティ察策が䞇党

セキュリティが高いのもformrunの魅力のポむントです。「ISO 27001 (ISMS)」の認蚌取埗やプラむバシヌマヌクの付䞎認定、SSL/ TLSによる暗号化通信、24時間365日のサヌバヌ監芖䜓制など察策がずられおいたす。

フォヌムを掻甚する際は、名前や䜏所、メヌルアドレスなど重芁な個人情報を取り扱いたす。ナヌザヌに安心しおフォヌムを利甚しおもらうためにも、フォヌムのセキュリティは必須です。

â–Œformrunのセキュリティの詳现はこちらをご確認ください

フォヌムバリデヌションを効率化したい堎合EFO察策が充実しおいるformrunの利甚を怜蚎したしょう

本蚘事ではフォヌムバリデヌションに関する基本的な知識を螏たえお、HTML5、JavaScript、jQueryを䜿っおフォヌムバリデヌションを行う際のコヌドなどをご玹介したした。

フォヌムの管理者は自瀟のフォヌムの蚀語にあわせお、適切なコヌドを挿入すれば、フォヌムに蚘茉された倀が正しい倀か怜蚌できたす。そしお、正しい倀が挿入されおいない堎合、正しい倀を再入力するようにナヌザヌにうながすこずができたす。

フォヌムバリデヌションの実装は、アプリケヌションの動䜜を守り、ナヌザヌの個人情報を守るこずに぀ながるため適切に蚭定しおおきたしょう。

しかし、フォヌムを本栌的に運甚したい堎合には、珟圚䜿甚しおいるフォヌム䜜成ツヌルの機胜が䞍十分に感じられるこずもあるでしょう。

  • デザむン性の高いフォヌムにし、回答者が入力しやすいフォヌムにしたい
  • サむトやサヌビスの䞖界芳にあったフォヌムにしたい
  • 自動返信メヌル・ファむルアップロヌド項目など、より充実した機胜を䜿いたい

䞊蚘のように感じおいる管理者の方はフォヌム䜜成ツヌル「formrun」を怜蚎しおみるのもおすすめです。無料での利甚可胜なため、ぜひ䞀床、詊しおみおはいかがでしょうか。
Sansan、BASE、hey、DMMなど幅広い芏暡の䌁業に導入されおおり、自瀟に最適なフォヌムを䜜るこずが可胜です。