チェックボックスフォームフィールドの選択肢の最小数を設定したいですか？WPFormsは現在、チェックボックスフィールドの選択肢の数を制限することをサポートしています。しかし、カスタムスニペットを使用すると、小さなPHPコードスニペットを使用して、これらの選択肢の最小数を設定できるようになります。
このチュートリアルでは、チェックボックスのフォームフィールドを設定する手順を説明します。
始める前に、WPFormsがあなたのWordPressサイトにインストールされ、有効化されていることを確認し、ライセンスを確認してください。
フォームの作成
まず、新規フォームを作成するか、既存のフォームを編集してフォームビルダーにアクセスします。フォームビルダーで、フォームにチェックボックスフィールドを少なくとも1つ追加してください。
最小数を設定するスニペットの追加
選択肢の最小数を設定するには、以下のコード・スニペットをサイトに追加する必要があります。コード・スニペットをサイトに追加する際にサポートが必要な場合は、こちらのチュートリアルをご覧ください。
/**
* Set minimum number of choices for a checkbox for the field
*
* @link https://wpforms.com/developers/how-to-set-a-minimum-number-of-choices-for-a-checkbox/
*/
function wpf_checkbox_validation( $field_id, $field_submit, $form_data ) {
$field_submit = (array) $field_submit;
// Make sure we have an array of choices and count the number of choices.
$count_choices = is_array( $field_submit ) ? count( $field_submit ) : 0;
if ( $count_choices < 2 ) {
wpforms()->process->errors[ $form_data[ 'id' ] ][ $field_id ] = esc_html__( 'Please select at least 2 options', 'your-text-domain' );
}
}
add_action( 'wpforms_process_validate_checkbox', 'wpf_checkbox_validation', 10, 3 );
上のコードでは、どのチェックボックスでも最低2つの選択肢が必要です。最小数を更新したい場合は、if文の値を変更してください。
注：このスニペットは、あなたのサイトのすべてのフォームのチェックボックスフィールドに適用されます。
ユーザーがフォーム上で 2つ以下の選択肢を 選択した場合、フォーム送信時にチェックボックスフィールドの下にメッセージが表示されます。
複数ページのフォームに制限を設定する
複数ページのフォームを使用する場合、フォームの送信を待たずにエラーを表示したい場合があります。
複数ページのフォームで「次へ」ボタンがクリックされたときに、チェックボックスフィールドの 下に警告メッセージを簡単に表示できます。
このオプションを使用するには、代わりに次のコード・スニペットをサイトに追加するだけです。
/**
* Set minimum number of choices for a checkbox form field
*
* @link https://wpforms.com/developers/how-to-set-a-minimum-number-of-choices-for-a-checkbox-field/
*/
function wpf_dev_min_checkbox() {
?>
<script type="text/javascript">
jQuery(document).ready(function($) {
var checkbox_forms = [
{form_id: 1000, min_count: 2, field_ids: [10,9]},
];
$('[id^=wpforms-] input[type=checkbox]').on('click', function(e){
var this_form_id = $(this).closest('form').data("formid");
var checkbox_form_ids = checkbox_forms.map(form => form.form_id);
if (checkbox_form_ids.includes(this_form_id)){
var checkbox_container = $(this).closest(".wpforms-field-checkbox");
var checkbox_container_field_id = checkbox_container.data("field-id");
checkbox_forms.forEach(function(form) {
if (this_form_id == form.form_id){
var min_value = form.min_count;
var field_ids_array = form.field_ids;
if (field_ids_array.includes(checkbox_container_field_id)){
validate_checkbox_min(e, checkbox_container, min_value);
}
}
});
}
});
function validate_checkbox_min(e, checkbox_container, min){
var minMaxSelection = checkbox_container.find('input[type=checkbox]:checked');
var this_field = $('[id^=wpforms-' + checkbox_container.data("field-id") + '-field_' + checkbox_container.data("field-id") + '-container]');
var warning_id = 'wpforms-' + checkbox_container.data("field-id") + '-warning';
$("#" + warning_id).remove();
if (minMaxSelection.length > 0 && minMaxSelection.length < min) {
e.stopPropagation();
this_field.addClass("wpforms-error");
this_field.removeClass("wpforms-valid");
this_field.attr('aria-invalid', 'true');
checkbox_container.addClass("wpforms-has-error");
checkbox_container.append('<em id="' + warning_id + '" class="wpforms-error" role="alert" aria-label="Error message" for="">Please select at least ' + min + ' options</em>');
} else {
this_field.removeClass("wpforms-error");
this_field.addClass("wpforms-valid");
this_field.attr('aria-invalid', 'false');
checkbox_container.removeClass("wpforms-has-error");
}
}
});
</script>
<?php
}
add_action('wpforms_wp_footer_end', 'wpf_dev_min_checkbox');
このコード・スニペットは、フォームIDをターゲットにします。 1000 そして 次のページ ボタンがクリックされると、スニペットはまず、フィールドIDに対していくつの選択肢が選択されているかをチェックします。 10 そして 9もし2より少なければ、ブラウザに警告メッセージが表示される。
よくある質問
以下では、チェックボックスフィールドの最小選択数の設定に関するよくある質問にお答えします。
Q: 特定のフォームと特定のフィールドIDでのみ使用できますか？
A:もちろんです！このコードを特定のフォームで使用するには、以下のコードスニペットを使用してください：
/**
* Set minimum number of choices for a checkbox form field
*
* @link https://wpforms.com/developers/how-to-set-a-minimum-number-of-choices-for-a-checkbox/
*/
function wpf_dev_checkbox_validation( $field_id, $field_submit, $form_data ) {
// Change the number to match your form ID
if ( absint( $form_data[ 'id' ] ) !== 1289 ) {
return;
}
$field_submit = (array) $field_submit;
// Make sure we have an array of choices and count the number of choices.
$count_choices = is_array( $field_submit ) ? count( $field_submit ) : 0;
if ( $count_choices < 2 ) {
wpforms()->process->errors[ $form_data[ 'id' ] ][ $field_id ] = esc_html__( 'Please select at least 2 options', 'your-text-domain' );
}
}
add_action( 'wpforms_process_validate_checkbox', 'wpf_dev_checkbox_validation', 10, 3 );
特定のフォームと特定のフィールドIDをターゲットにしたい場合は、次のコード・スニペットを使ってください。
/**
* Set minimum number of choices for a checkbox form field
*
* @link https://wpforms.com/developers/how-to-set-a-minimum-number-of-choices-for-a-checkbox/
*/
function wpf_dev_checkbox_validation( $field_id, $field_submit, $form_data ) {
// Change the number to match your form ID
if ( absint( $form_data[ 'id' ] ) !== 1289 ) {
return $field_id;
}
// Change this number to match the field ID
if (absint($field_id) === 15 ) {
$field_submit = (array) $field_submit;
// Make sure we have an array of choices and count the number of choices.
$count_choices = is_array( $field_submit ) ? count( $field_submit ) : 0;
if ( $count_choices < 2 ) {
wpforms()->process->errors[ $form_data[ 'id' ] ][ $field_id ] = esc_html__( 'Please select at least 2 options', 'your-text-domain' );
}
}
}
add_action( 'wpforms_process_validate_checkbox', 'wpf_dev_checkbox_validation', 10, 3 );
注：フォームとフィールドIDを見つけるのに助けが必要な場合は、このチュートリアルをご覧ください。
Q: これは支払い分野にも使えますか？
A:もちろんです！支払いチェックボックス項目に使用するには、次のスニペットを使用してください。
/**
* Set minimum number of choices for a payment checkbox form field
*
* @link https://wpforms.com/developers/how-to-set-a-minimum-number-of-choices-for-a-checkbox/
*/
function wpf_dev_limit_payment_field( $field_id, $field_submit, $form_data ) {
$form_id = 731; // Limit to form ID: Use 0 to target all forms
$fieldID = 21; // Limit to field ID: Use 0 to target all checkbox fields
$min = 2; // Change the minimum amount
$max = 5; // Change the maximum amount
// Limit to specific form if {$form_id} is set
if ( absint( $form_data[ 'id' ] ) !== $form_id && !empty( $form_id ) ) {
return;
}
// Limit to specific field ID if {$fieldID} is set
if ( absint( $field_id ) !== $fieldID && !empty( $fieldID ) ) {
return;
}
// Make sure we have an array of choices and count the number of choices.
$count = is_array( $field_submit ) ? count( $field_submit ) : 0;
// Process error if choices count is less than {$min} or greater than {$max}
if( count( $field_submit ) < $min ) {
wpforms()->process->errors[ $form_data[ 'id' ] ] [ $field_id ] = esc_html__( 'Please select a minimum of ' . $min .' choices.', 'your-text-domain' );
} elseif ( count( $field_submit ) > $max ) {
wpforms()->process->errors[ $form_data[ 'id' ] ] [ $field_id ] = esc_html__( 'Please select a maximum of ' . $max . ' choices.', 'your-text-domain' );
}
}
add_action( 'wpforms_process_validate_payment-checkbox', 'wpf_dev_limit_payment_field', 10, 3 );
以上です！これで、チェックボックスの選択肢の最小数を設定する方法を学びました。
次に、チェックボックスの見た目をカスタマイズしたいですか？チェックボックスと複数選択フィールドをボタンのようにカスタマイズするガイドをご覧ください。
関連
行動参照：