WPFormsの数値フィールドで許容される範囲を制限したいですか？数値入力の最小値と最大値を設定するにはいくつかの方法があります。
このチュートリアルでは、フォームに範囲制限を実装するための利用可能な方法を紹介します。
フォームの設定
まずはフォームを作成し、Numbersフィールドを組み込むことから始めましょう。フォームを作成する際に手引きが必要な場合は、こちらのドキュメントを参照してください。
基本的な範囲制限の設定
Numbersフィールドには、フィールド・オプション・パネルに範囲コントロールがあります。範囲 フィールドに最小値と最大値を入力するだけで、ユーザーの入力を制限することができます。
Numbersフィールドの機能の詳細については、Numbersフィールドの使い方ガイドをご覧ください。
高度なレンジコントロールの実装
偶数の強制やカスタム検証メッセージのような特殊な要件については、JavaScript を使用してカスタム範囲コントロールを実装できます。コードスニペットの追加についてガイダンスが必要な場合は、WordPress でカスタムコードを追加するガイドを参照してください。
CSSクラスの追加
まず、フィールドにCSSクラスを追加して、いつでも 数字 フィールドにこの特定のクラスを追加すると、このスニペットが呼び出されます。フィールドにCSSクラスを追加するには、フォームビルダーを開いて 数字 を開きます。 フィールド・オプション パネルをクリックします。次に 上級 そして CSSクラス追加 wpf-num-limit .
コード・スニペットの追加
では、スニペットを統合してみよう。
この特定のスニペットは 5 の最大値である。 20 どんな 数字 フィールドのCSSクラスは wpf-num-limit.
/**
* Limit number range allowed for a Numbers field
* Apply the class "wpf-num-limit" to the field to enable.
*
* @link https://wpforms.com/developers/how-to-limit-range-allowed-in-numbers-field/
*/
function wpf_dev_num_limit() {
?>
<script type="text/javascript">
jQuery(function(){
// Enter 5 minimum (5) and maximum (20) amount for the number field
jQuery( '.wpf-num-limit input' ).attr({ 'min':5, 'max':20 } );
});
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_num_limit', 30 );
フォームを保存した後、ユーザーがコードで定義された範囲外の数値を入力しようとすると、バリデーションエラーが発生します。
偶数のみの制限
ステップ値を追加して偶数のみを選択するようにするには、以下のコード・スニペットを使用する：
/**
* Limit number range in multiples of 2
* Apply the class "wpf-num-limit" to the field to enable.
*
* @link https://wpforms.com/developers/how-to-limit-range-allowed-in-numbers-field/
*/
function wpf_dev_num_limit() {
?>
<script type="text/javascript">
jQuery(function(){
// Minimum accepted number is 20
// Maximum accepted number is 40
// Only accept multiples of 2
jQuery( '.wpf-num-limit input' ).attr( { 'min':20, 'max':40, 'step': 2 } );
});
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_num_limit', 30 );
複数のフォームを扱う
異なるCSSクラスを使用して、異なるフォームに固有の範囲を設定する場合は、次のスニペットを使用してください：
この例では、wpf-num-limit-max-under-twentyと wpf-num-limit-max-under-fiftyを使っている。
/**
* Two different CSS classes in the same function
* Apply the class "wpf-num-limit" to the field to enable.
*
* @link https://wpforms.com/developers/how-to-limit-range-allowed-in-numbers-field/
*/
function wpf_dev_num_limit() {
?>
<script type="text/javascript">
jQuery(function(){
// Minimum set to 0, maximum set to 20
jQuery( '.wpf-num-limit-max-under-twenty input' ).attr({ 'min':0, 'max':20 });
// Minimum set to 21, maximum set to 50
jQuery( '.wpf-num-limit-max-under-fifty input' ).attr({ 'min':21, 'max':50 });
});
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_num_limit', 30 );
エラーメッセージのカスタマイズ
以下のコード・スニペットを使用して、ユーザーが無効な数字を入力したときに表示されるデフォルトのエラー・メッセージを変更してください。
/**
* Limit number range allowed for a Numbers field
* Apply the class "wpf-num-limit" to the field to enable.
*
* @link https://wpforms.com/developers/how-to-limit-range-allowed-in-numbers-field/
*/
function wpf_dev_num_limit() {
?>
<script type="text/javascript">
jQuery(function(){
// Minimum 5, maximum 20
jQuery( '.wpf-num-limit input' ).attr({ 'min':5, 'max':20 } ); // Define number limits
});
// Message to be displayed if the min and or max is not met
jQuery.extend(jQuery.validator.messages, {
max: jQuery.validator.format( "We apologize, there can only be a max allowance of {0}." ),
min: jQuery.validator.format( "We apologize, there needs to be a minimum allowance of {0}." )
});
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_num_limit', 30 );
これで作業は終了です！これで、数値フィールドの最小値と最大値の設定が完了しました。必須フィールドのインジケータをカスタマイズしたい場合は、必須フィールドのインジケータを変更する方法をご覧ください。