AI要約
WPFormsで数値フィールドに入力できる範囲を制限しますか？数値入力に最小値と最大値を設定するには、いくつかの方法があります。
このチュートリアルでは、フォームに範囲制限を実装するための利用可能な方法を紹介します。
フォームの設定
まず、フォームを作成し、数値フィールドを組み込みましょう。フォームの作成方法についてガイダンスが必要な場合は、このドキュメントを参照して、手順を確認してください。
基本的な範囲制限の設定
数値フィールドには、フィールドオプションパネルに範囲コントロールが含まれています。ユーザー入力を制限するには、範囲フィールドに最小値と最大値を入力するだけです。
数値フィールドの機能の詳細については、数値フィールドの使用方法に関するガイドをご覧ください。
高度な範囲コントロールの実装
偶数のみを強制したり、カスタム検証メッセージを表示したりするなど、特別な要件がある場合は、JavaScriptを使用してカスタム範囲コントロールを実装できます。コードスニペットの追加に関するガイダンスが必要な場合は、WordPressにカスタムコードを追加する方法に関するこのガイドを参照してください。
CSSクラスの追加
まず、フィールドにCSSクラスを追加して、この特定のクラスを持つ数値フィールドがある場合に、このスニペットが呼び出されるようにします。フィールドにCSSクラスを追加するには、フォームビルダーを開き、数値をクリックしてフィールドオプションパネルを開きます。次に、高度をクリックし、CSSクラスにwpf-num-limitを追加します。
コードスニペットの追加
次に、スニペットを統合しましょう。
この特定のスニペットは、wpf-num-limitというラベルのCSSクラスを持つ数値フィールドの最小値5と最大値20を強制します。
/**
* 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 );
これでプロセスは完了です！数値フィールドで許可される最小値と最大値の両方を正常に設定しました。必須フィールドインジケーターをカスタマイズしたい場合は、必須フィールドインジケーターの変更方法に関する記事を参照して詳細を確認してください。