### [WPFormsの数値フィールドで許可される範囲を制限する方法](https://wpforms.com/developers/how-to-limit-range-allowed-in-numbers-field/) **公開日:** 2020年10月27日 **著者:** Umair Majeed **抜粋:** このチュートリアルでは、数値フィールドの範囲を制限する方法を説明します。 **コンテンツ:** WPFormsで数値フィールドで許可される範囲を制限したいと思いますか？ 数値入力に最小値と最大値を設定するには、いくつかの方法があります。 このチュートリアルでは、フォームに範囲制限を実装するための利用可能な方法を説明します。 ## フォームの設定 まず、フォームを作成し、**数値**フィールドを組み込みましょう。フォームの作成に関するガイダンスが必要な場合は、[このドキュメントを参照して、ステップバイステップの手順を確認してください](https://wpforms.com/docs/creating-first-form/ "最初のフォームの作成")。 ## 基本的な範囲制限の設定 数値フィールドには、フィールドオプションパネルに範囲コントロールが含まれています。ユーザー入力を制限するには、**範囲**フィールドに最小値と最大値を入力するだけです。 数値フィールドの機能の詳細については、[数値フィールドの使用](https://wpforms.com/docs/using-the-numbers-field)に関するガイドを確認してください。 ## 高度な範囲コントロールの実装 偶数のみを強制したり、カスタム検証メッセージを表示したりするなど、特別な要件がある場合は、JavaScriptを使用してカスタム範囲コントロールを実装できます。コードスニペットの追加に関するガイダンスが必要な場合は、[WordPressにカスタムコードを追加する方法](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/)に関するこのガイドを参照してください。 ### CSSクラスの追加 まず、フィールドにCSSクラスを追加して、この特定のクラスを持つ数値フィールドがある場合に、このスニペットが呼び出されるようにします。フィールドにCSSクラスを追加するには、フォームビルダーを開き、**数値**をクリックして**フィールドオプション**パネルを開きます。次に、**高度な**をクリックし、**CSSクラス**に`wpf-num-limit`を追加します。 ### コードスニペットの追加 次に、スニペットを統合しましょう。 この特定のスニペットは、`wpf-num-limit`というCSSクラスを持つ数値フィールドの最小値を**5**、最大値を**20**に強制します。 ``` /** * 数値フィールドで許可される数値範囲を制限します * 有効にするには、フィールドに"wpf-num-limit"クラスを適用します。 * * @link https://wpforms.com/developers/how-to-limit-range-allowed-in-numbers-field/ */ function wpf_dev_num_limit() { ?> **カテゴリ:** フィールド **タグ:** Javascript, JS ---