初心者でも簡単！JavaScriptバリデーション活用方法10選

はじめに
●JavaScriptバリデーションとは
●JavaScriptバリデーションの基本
- ○サンプルコード1：テキストボックスの入力内容チェック
- ○サンプルコード2：ラジオボタンの選択状態チェック
●JavaScriptバリデーションの応用例
●注意点と対処法
●カスタマイズ方法
まとめ

はじめに

この記事を読めば、JavaScriptバリデーションを活用して、フォームの入力内容をチェックする方法が身に付きます。

初心者でも簡単に理解できるように、基本的な使い方から応用例まで徹底解説します。

10個のサンプルコードを通じて、実践的な知識を習得しましょう。

●JavaScriptバリデーションとは

JavaScriptバリデーションは、ユーザーからの入力情報をチェックし、正しいデータが送信されることを確認するための手法です。

例えば、必須項目が入力されているか、メールアドレスの形式が正しいかなどを確認できます。

●JavaScriptバリデーションの基本

バリデーションの基本を学ぶために、まずはテキストボックスの入力内容チェックとラジオボタンの選択状態チェックのサンプルコードを見ていきましょう。

○サンプルコード1：テキストボックスの入力内容チェック

このコードでは、テキストボックスに入力された内容が空でないことを確認するバリデーションを実装しています。

この例では、フォームの送信ボタンをクリックしたときに、入力内容をチェックしています。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テキストボックスの入力内容チェック</title>
</head>
<body>
<form id="myForm">
  <label for="myInput">名前：</label>
  <input type="text" id="myInput">
  <button type="submit">送信</button>
</form>

<script>
document.getElementById('myForm').addEventListener('submit', function(event) {
  event.preventDefault();
  var inputText = document.getElementById('myInput').value;
  if (inputText === '') {
    alert('名前を入力してください。');
  } else {
    alert('入力内容：' + inputText);
  }
});
</script>
</body>
</html>

○サンプルコード2：ラジオボタンの選択状態チェック

このコードでは、ラジオボタンがいずれか選択されていることを確認するバリデーションを実装しています。

この例では、フォームの送信ボタンをクリックしたときに、選択状態をチェックしています。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ラジオボタンの選択状態チェック</title>
</head>
<body>
<form id="myForm">
  <label for="option1">オプション1</label>
  <input type="radio" name="options" id="option1" value="1">
  <label for="option2">オプション2</label>
  <input type="radio" name="options" id="option2" value="2">
  <button type="submit">送信</button>
</form>

<script>
document.getElementById('myForm').addEventListener('submit', function(event) {
  event.preventDefault();
  var radioOptions = document.getElementsByName('options');
  var selectedOption = null;
  for (var i = 0; i < radioOptions.length; i++) {
    if (radioOptions[i].checked) {
      selectedOption = radioOptions[i].value;
      break;
    }
  }
  if (selectedOption === null) {
    alert('オプションを選択してください。');
  } else {
    alert('選択したオプション：' + selectedOption);
  }
});
</script>
</body>
</html>

●JavaScriptバリデーションの応用例

次に、さまざまなフォーム要素に対するバリデーションの応用例を見ていきましょう。

下記のサンプルコードでは、それぞれメールアドレスの形式チェック、パスワード強度チェック、日付の妥当性チェック、クレジットカード番号の妥当性チェック、郵便番号の形式チェック、電話番号の形式チェック、ファイルアップロードのサイズと形式チェック、リアルタイム入力内容チェックを実装しています。

○サンプルコード3：メールアドレスの形式チェック

このコードでは、メールアドレスの形式が正しいかどうかをチェックするバリデーションを実装しています。

この例では、フォームの送信ボタンをクリックした際に、入力されたメールアドレスの形式を確認し、不正な形式であればアラートを表示しています。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>メールアドレスの形式チェック</title>
</head>
<body>
<form id="myForm">
  <label for="email">メールアドレス：</label>
  <input type="text" name="email" id="email">
  <button type="submit">送信</button>
</form>

<script>
document.getElementById('myForm').addEventListener('submit', function(event) {
  event.preventDefault();
  var email = document.getElementById('email').value;
  var emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;

  if (emailRegex.test(email)) {
    alert('メールアドレスが正しい形式です。');
  } else {
    alert('正しいメールアドレスの形式を入力してください。');
  }
});
</script>
</body>
</html>

○サンプルコード4：パスワード強度チェック

このコードでは、パスワードの強度をチェックするバリデーションを実装しています。

この例では、フォームの送信ボタンをクリックした際に、パスワードが特定の条件を満たしているかどうかを検証し、条件を満たさない場合はアラートを表示します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>パスワード強度チェック</title>
</head>
<body>
<form id="myForm">
  <label for="password">パスワード：</label>
  <input type="password" name="password" id="password">
  <button type="submit">送信</button>
</form>

<script>
document.getElementById('myForm').addEventListener('submit', function(event) {
  event.preventDefault();
  var password = document.getElementById('password').value;
  var lowerCaseRegex = /[a-z]/;
  var upperCaseRegex = /[A-Z]/;
  var numberRegex = /[0-9]/;
  var specialCharRegex = /[-!$%^&*()_+|~=`{}[\]:";'<>?,.\/]/;

  if (password.length >= 8 &&
      lowerCaseRegex.test(password) &&
      upperCaseRegex.test(password) &&
      numberRegex.test(password) &&
      specialCharRegex.test(password)) {
    alert('パスワードが適切な強度です。');
  } else {
    alert('パスワードは8文字以上で、大文字・小文字・数字・特殊文字が含まれている必要があります。');
  }
});
</script>
</body>
</html>

○サンプルコード5：日付の妥当性チェック

このコードでは、入力された日付が正しい形式であるかどうかを検証するバリデーションを実装しています。

この例では、フォームの送信ボタンをクリックした際に、日付が正しい形式であるかどうかを確認し、正しくない場合はアラートを表示します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>日付の妥当性チェック</title>
</head>
<body>
<form id="myForm">
  <label for="date">日付：</label>
  <input type="text" name="date" id="date" placeholder="yyyy-mm-dd">
  <button type="submit">送信</button>
</form>

<script>
document.getElementById('myForm').addEventListener('submit', function(event) {
  event.preventDefault();
  var inputDate = document.getElementById('date').value;
  var dateRegex = /^(\d{4})-(\d{2})-(\d{2})$/;

  if (dateRegex.test(inputDate)) {
    var [, year, month, day] = inputDate.match(dateRegex);
    var date = new Date(year, month - 1, day);

    if (date.getFullYear() == year && date.getMonth() == month - 1 && date.getDate() == day) {
      alert('入力された日付は正しい形式です。');
    } else {
      alert('入力された日付は実在しません。');
    }
  } else {
    alert('日付の形式が正しくありません。形式は yyyy-mm-dd です。');
  }
});
</script>
</body>
</html>

○サンプルコード6：クレジットカード番号の妥当性チェック

このコードでは、入力されたクレジットカード番号が正しい形式であることを検証するバリデーションを実装しています。

この例では、フォームの送信ボタンをクリックした際に、クレジットカード番号が正しい形式であるかどうかを確認し、正しくない場合はアラートを表示します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>クレジットカード番号の妥当性チェック</title>
</head>
<body>
<form id="myForm">
  <label for="creditCard">クレジットカード番号：</label>
  <input type="text" name="creditCard" id="creditCard">
  <button type="submit">送信</button>
</form>

<script>
function luhnCheck(value) {
  var sum = 0;
  var shouldDouble = false;
  for (var i = value.length - 1; i >= 0; i--) {
    var digit = parseInt(value.charAt(i), 10);

    if (shouldDouble) {
      if ((digit *= 2) > 9) digit -= 9;
    }

    sum += digit;
    shouldDouble = !shouldDouble;
  }
  return sum % 10 == 0;
}

document.getElementById('myForm').addEventListener('submit', function(event) {
  event.preventDefault();
  var creditCard = document.getElementById('creditCard').value;

  if (/^\d{13,16}$/.test(creditCard) && luhnCheck(creditCard)) {
    alert('クレジットカード番号は正しい形式です。');
  } else {
    alert('クレジットカード番号が正しくありません。');
  }
});
</script>
</body>
</html>

○サンプルコード7：郵便番号の形式チェック

このコードでは、入力された郵便番号が正しい形式であることを検証するバリデーションを実装しています。

この例では、フォームの送信ボタンをクリックした際に、郵便番号が正しい形式であるかどうかを確認し、正しくない場合はアラートを表示します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>郵便番号の形式チェック</title>
</head>
<body>
<form id="myForm">
  <label for="postalCode">郵便番号：</label>
  <input type="text" name="postalCode" id="postalCode">
  <button type="submit">送信</button>
</form>

<script>
document.getElementById('myForm').addEventListener('submit', function(event) {
  event.preventDefault();
  var postalCode = document.getElementById('postalCode').value;

  if (/^\d{3}-\d{4}$/.test(postalCode)) {
    alert('郵便番号は正しい形式です。');
  } else {
    alert('郵便番号が正しくありません。');
  }
});
</script>
</body>
</html>

○サンプルコード8：電話番号の形式チェック

このコードでは、入力された電話番号が正しい形式であることを確認するバリデーションを実装しています。

この例では、フォームの送信ボタンをクリックした際に、電話番号が正しい形式であるかどうかを検証し、正しくない場合はアラートを表示します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>電話番号の形式チェック</title>
</head>
<body>
<form id="myForm">
  <label for="phoneNumber">電話番号：</label>
  <input type="text" name="phoneNumber" id="phoneNumber">
  <button type="submit">送信</button>
</form>

<script>
document.getElementById('myForm').addEventListener('submit', function(event) {
  event.preventDefault();
  var phoneNumber = document.getElementById('phoneNumber').value;

  if (/^0\d{1,4}-\d{1,4}-\d{4}$/.test(phoneNumber)) {
    alert('電話番号は正しい形式です。');
  } else {
    alert('電話番号が正しくありません。');
  }
});
</script>
</body>
</html>

○サンプルコード9：ファイルアップロードのサイズと形式チェック

このコードでは、アップロードされたファイルのサイズと形式を検証するバリデーションを実装しています。

この例では、フォームの送信ボタンをクリックした際に、アップロードされたファイルが指定されたサイズ以下であるか、また指定された形式であるかを検証し、正しくない場合はアラートを表示します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ファイルアップロードのサイズと形式チェック</title>
</head>
<body>
<form id="myForm">
  <label for="fileInput">ファイルアップロード：</label>
  <input type="file" name="fileInput" id="fileInput">
  <button type="submit">送信</button>
</form>

<script>
document.getElementById('myForm').addEventListener('submit', function(event) {
  event.preventDefault();
  var fileInput = document.getElementById('fileInput');
  var file = fileInput.files[0];

  if (file) {
    // ファイルサイズのチェック (最大1MB)
    var maxFileSize = 1024 * 1024;
    if (file.size > maxFileSize) {
      alert('ファイルサイズが大きすぎます。1MB以下のファイルを選択してください。');
      return;
    }

    // ファイル形式のチェック (画像ファイルのみ許可)
    var allowedFormats = ['image/jpeg', 'image/png', 'image/gif'];
    if (!allowedFormats.includes(file.type)) {
      alert('許可されていないファイル形式です。JPEG, PNG, GIF形式の画像ファイルを選択してください。');
      return;
    }

    alert('ファイルが正しいサイズと形式でアップロードされました。');
  } else {
    alert('ファイルが選択されていません。');
  }
});
</script>
</body>
</html>

○サンプルコード10：リアルタイム入力内容チェック

このコードでは、入力内容をリアルタイムで検証し、その結果を表示する機能を実装しています。

この例では、テキストボックスに入力された文字数が指定された範囲内であるかをリアルタイムに検証し、結果を表示します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>リアルタイム入力内容チェック</title>
</head>
<body>
<label for="textInput">テキスト入力：</label>
<input type="text" name="textInput" id="textInput">
<p id="result">文字数を確認してください。</p>

<script>
document.getElementById('textInput').addEventListener('input', function() {
  var inputText = this.value;
  var textLength = inputText.length;
  var resultElement = document.getElementById('result');

  if (textLength >= 5 && textLength <= 10) {
    resultElement.textContent = '適切な文字数です。';
    resultElement.style.color = 'green';
  } else {
    resultElement.textContent = '文字数が範囲外です。5～10文字の範囲で入力してください。';
    resultElement.style.color = 'red';
  }
});
</script>
</body>
</html>

このコードでは、inputイベントリスナーを使って、テキストボックスの入力内容が変更されるたびにチェックを行っています。

文字数が5～10文字の範囲内であれば、緑色の文字で「適切な文字数です。」と表示し、範囲外であれば赤色の文字で「文字数が範囲外です。5～10文字の範囲で入力してください。」と表示します。