一行のテキストフォームフィールドで数字を制限する方法

ユーザーが1行テキストフィールドに数字を入力できないようにしたいですか?入力マスクを使用してフィールドをアルファベットのみに制限することもできますが、このガイドでは数字をブロックしながら大文字と小文字の両方を許可する、より柔軟なソリューションを作成する方法を紹介します。

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

フォームの設定

まず、新しいフォームを作成し、制限したい一行テキストフィールドを追加します。この例では、ユーザー名フィールドとして使用します。フォームの作成にヘルプが必要な場合は、最初のフォーム作成ガイドをご覧ください。

フォームIDとフィールドIDを控えておいてください。これらのIDの見つけ方がわからない場合は、フォームIDとフィールドIDの見つけ方についてのガイドをご覧ください。

バリデーションコードの追加

このコードは、フィールドに数字が検出された場合、フォーム送信を防止します。コードの追加にお困りの場合は、WordPress サイトへのカスタムコードの追加に関するガイドをご覧ください。

PHPコードの以下の値を置き換える:

  • 11行目1000をフォームIDに置き換える
  • 17行目25をフィールドIDに置き換える
  • 22行目25をフィールドIDに置き換える。

フォーム送信時にユーザー名フィールドに数字が含まれている場合、エラーメッセージが表示され、フォームは送信されません。

一行のテキスト・フォーム・フィールドで数値を制限できるようになりました。

リアルタイム検証オプション

フォーム送信前にユーザーが数字を入力するのを防ぎたい場合は、リアルタイムバリデーションを実装することができます。その方法は次のとおりです:

まず、フォームを編集し、「一行テキスト」フィールドを選択した状態で、「フィールドオプション」の「詳細設定」タブをクリックし、「CSSクラス」フィールドに「数字なし」を追加します。

次に、このJavaScriptコードをサイトに追加する:

スニペットが追加されると、訪問者がタブまたはフィールドをクリックしたときに、すぐにエラーメッセージが表示され、バリデーションエラーが警告されます。

参考アクション

wpforms_process

一行テキストのフォームフィールドに特殊文字が入力されないようにしたいですか?フォームフィールドから特殊文字を制限する方法のチュートリアルをご覧ください。