### [単一行テキスト入力フィールドでの数字入力の制限方法](https://wpforms.com/developers/how-to-restrict-numbers-in-a-single-line-text-form-field/)

**公開日:** 2020年7月23日
**著者：** Umair Majeed

**概要：** このチュートリアルでは、単一行テキスト入力フィールドへの数字の入力を制限するために必要な手順を解説します。 

**内容：**

シングルラインテキストフィールドへの数字の入力をユーザーにさせないようにしたいですか？入力マスクを使用してフィールドをアルファベットのみの入力に制限することも可能ですが、このガイドでは、数字をブロックしつつ大文字と小文字の両方を許可する、より柔軟な解決策を作成する方法をご紹介します。

このチュートリアルでは、これらのフィールドで数字の入力を制限するために必要なコードスニペットをご紹介します。

## フォームの設定

まず、新しいフォームを作成し、制限したい**単一行テキスト**フィールドを追加します。この例では、ユーザー名フィールドとして使用します。フォームの作成方法については、[最初のフォームの作成ガイド](https://wpforms.com/docs/creating-first-form/)をご覧ください。

コードで必要になるため、フォームIDとフィールドIDをメモしておいてください。これらのIDの確認方法がわからない場合は、[フォームおよびフィールドIDの確認方法](https://wpforms.com/how-to-track-user-locations-with-wordpress-form-submissions/)に関するガイドをご参照ください。

## 検証コードの追加

このコードは、フィールド内に数字が検出された場合にフォームの送信を阻止します。サイトへのコード追加についてサポートが必要な場合は、[WordPress サイトへのカスタムコードの追加](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/)に関するガイドをご確認ください。

PHPコード内の以下の値を置き換えてください：

- **11行目**：**1000**をフォームIDに置き換えてください
- **17行目**：**25**をフィールドIDに置き換えてください
- **22行目**：**25**を再度フィールドIDに置き換えてください

フォームが送信される際、**ユーザー名**フィールドに数字が1つでも含まれていると、エラーメッセージが表示され、フォームは送信されません。

![これで、単一行テキストフォームフィールドでの数字入力を制限できるようになりました](https://wpforms.com/wp-content/uploads/2022/07/restrict-numbers-error-message.jpg)## リアルタイム検証オプション

フォーム送信前にユーザーによる数字の入力を防ぎたい場合は、リアルタイム検証を実装できます。手順は以下の通りです：

まず、フォームを編集し、**単一行テキスト**フィールドを選択した状態で、**フィールドオプション**の下にある**詳細**タブをクリックし、**CSSクラス**フィールドに**no-numbers**を追加します。

次に、以下の JavaScript コードをサイトに追加してください：

このスニペットを追加すると、ユーザーがフィールドからタブキーで移動したり、クリックしてフィールド外に出たりした際に、検証エラーを通知するエラーメッセージが即座に表示されます。

## リファレンスアクション

[wpforms\_process](https://wpforms.com/developers/wpforms_process/ "wpforms_process アクションの使用")

**単一行テキスト**フォームフィールドへの特殊文字の入力も防止したいですか？[フォームフィールドでの特殊文字の制限方法](https://wpforms.com/developers/how-to-restrict-special-characters-from-a-form-field/ "How to Restrict Special Characters From a Form Field")のチュートリアルをご覧ください。

**カテゴリ:** フィールド

**タグ:** Javascript, jQuery, JS, PHP

---