【サンプルコード付き】日本語必須＆ふりがな入力をチェックするフォームの作り方

Posted on by

Webサイトのお問い合わせフォームで「お名前は日本語必須」
「ふりがなはひらがな必須」といった入力制限を設けたいことはありませんか？
今回は、シンプルなHTMLフォームに正規表現によるバリデーションを組み込み、
入力が正しくない場合はエラーを表示する方法をご紹介します。

HTMLフォームのサンプルコード

以下のフォームでは、「お名前」と「ふりがな」に入力制限をかけています。

  • お名前 → 日本語（漢字・ひらがな・カタカナ）が必須
  • ふりがな → ひらがなのみ入力可能
<form id="sample-form" action="./sample-mail.php" method="post">
  <table class="sample-table">
    <tbody>
      <tr>
        <th>お名前<span class="sample-error">※</span></th>
        <td>
          <input type="text" class="sample-input" id="sample-name" name="お名前" placeholder="例）山田 太郎" required />
          <span id="sample-error-name" style="color:red; display:none;">日本語（漢字・ひらがな・カタカナ）で入力してください。</span>
        </td>
      </tr>
      <tr>
        <th>ふりがな<span class="sample-error">※</span></th>
        <td>
          <input type="text" class="sample-input" id="sample-furigana" name="ふりがな" placeholder="例）やまだ たろう" required />
          <span id="sample-error-furigana" style="color:red; display:none;">ひらがなで入力してください。</span>
        </td>
      </tr>
      <tr>
        <th>メールアドレス</th>
        <td>
          <input type="email" class="sample-input" name="メールアドレス" placeholder="例）sample@example.com" />
        </td>
      </tr>
    </tbody>
  </table>
  <div class="sample-btn-wrap">
    <input type="submit" class="sample-submit" value="送信する" />
  </div>
</form>

JavaScriptでのバリデーション処理

フォーム送信時に「日本語チェック」「ひらがなチェック」を行います。
また、入力中にエラーがあれば即時にメッセージを表示します。

<script>
document.getElementById("sample-form").addEventListener("submit", function(e) {
  let valid = true;

  // 「お名前」→ 日本語必須
  const name = document.getElementById("sample-name").value;
  const japaneseRegex = /[ぁ-んァ-ン一-龥]/;
  if (!japaneseRegex.test(name)) {
    document.getElementById("sample-error-name").style.display = "inline";
    valid = false;
  } else {
    document.getElementById("sample-error-name").style.display = "none";
  }

  // 「ふりがな」→ ひらがなのみ
  const furigana = document.getElementById("sample-furigana").value;
  const hiraganaRegex = /^[ぁ-んー\s　]+$/;
  if (!hiraganaRegex.test(furigana)) {
    document.getElementById("sample-error-furigana").style.display = "inline";
    valid = false;
  } else {
    document.getElementById("sample-error-furigana").style.display = "none";
  }

  if (!valid) {
    e.preventDefault(); // 送信中止
  }
});
</script>

ポイント解説

  • 正規表現の役割
    • /[ぁ-んァ-ン一-龥]/ → 日本語（ひらがな・カタカナ・漢字）のいずれかを1文字でも含める
    • /^[ぁ-んー\s　]+$/ → 入力全体が「ひらがな・長音符・スペース」のみで構成されているかチェック
  • エラーメッセージの表示方法
    <span> をデフォルトで display:none にしておき、エラー時のみ display:inline に切り替えることで実現しています。
  • サンプル用クラス名
    本記事では他のコードと衝突しないよう、すべて sample- プレフィックスを付けています。

まとめ

日本語やひらがなの入力チェックは、正規表現を活用するだけで簡単に実装可能です。
また、ブラウザの pattern 属性を併用すれば、ネイティブバリデーションも効かせることができます。

お問い合わせフォームや会員登録フォームなどで入力精度を高めたいときに、ぜひこの方法を活用してみてください。