Quform 文のフォーム選択フィールドで選択オプションの数を制限する

0

Quform銀有料 WordPress お問い合わせフォームプラグインとしてこのブログにも適用されています。スリムながらも強力な機能を提供し、軽くてスピードの面で大丈夫そうです。問合せフォーム複数選択フィールドで、ユーザーが選択可能なオプションの数を制限する必要がある状況があります。この場合、JavaScriptで選択できるアイテムの数を制限できます。

Quform 文のフォーム選択フィールドで選択オプションの数を制限する

Quform ステートメントフォームの複数選択フィールドで選択オプションの数を制限する

複数選択フィールドで選択可能なオプションの数を制限する機能を提供するコンタクトフォームプラグインはほとんどないようです。 WPForms、Fluent Forms、Ninja Forms、Forminatorなど、いくつかの人気の問い合わせフォームプラグインをチェックしてみると、すべてこの機能は提供されませんね。

Quformの選択フィールドでユーザーが選択できる最大数を制限したい場合は、Quformに次のjQueryコードを提示しています。

jQuery(function ($) {
    $('.quform-field-1_3').on('change', function () {
        var $this = $(this),
            value = $this.val();
 
        if (value !== null && value.length > 2) {
            $this.val(this.lastValidValue || null).trigger('change');
        } else {
            this.lastValidValue = value;
        }
    }).trigger('change');
});
  • 上では、行2の1_3は複数選択フィールドの一意のIDに置き換えられます。
  • 行 6 の数字「2」は、選択可能な最大数字に置き換えられます。

私は上記のコードがうまくいきませんでしたので、上記のコードを適用して次のようにコードを修正しました。

document.addEventListener('DOMContentLoaded', function () {
    // 1) 최대 허용 개수
    const MAX = 10;

    // 2) 대상 체크박스 셀렉터 (구조에 맞춰 name으로 고정)
    const BOX = 'input[type="checkbox"][name="quform_1_3[]"]';

    // 3) 변경될 때마다 개수 체크
    document.addEventListener('change', function (e) {
        const t = e.target;
        if (!t.matches(BOX)) return;

        // 같은 그룹 안의 체크된 개수 계산
        const container = t.closest('.quform-element-1_3') || document;
        const checkedCount = container.querySelectorAll(BOX + ':checked').length;

        // 10개 초과 시 방금 변경한 항목을 되돌리고 경고
        if (checkedCount > MAX) {
            t.checked = false;
            alert('You can select up to 10 compaines');
        }
    });
});

上記のコードを適用すると、最大10個まで選択できます。 10個を超えると警告ウィンドウが表示されます。

Quform 選択フィールドの警告

警告フレーズは必要に応じて修正してください。

上記 JavaScriptを コードは最新のQuformバージョンでうまく機能します。

JavaScriptコードを追加する

JSコードはいくつかの方法で追加できます。 Quformは、サイトの速度への影響を最小限に抑えるためにカスタムJS / CSSを追加する機能を提供します。

フォーム»設定»カスタムCSS＆JSに移動し、 カスタムJavascript セクションに追加します。

他の方法では、WPCodeなどのプラグインを使用してJSコードを追加することができますが、それはお勧めできません。

参考として、Forminatorプラグインの選択フィールドでは、計算に使用できるように各オプションに数値を指定できます。この値は、ユーザーには見えず、コーディングを介して計算する必要がある場合に便利です。

WordPress Forminator ステートメントのプラグイン選択フィールドの計算値を設定する

最後に、

以上、Quform Selectフィールドでユーザーが選択できるオプションの数を制限する方法について説明しました。

WPFormsまたは他のコンタクトフォームプラグインを使用している場合は、同様の方法でアクセスできます。 JavaScriptを使用して選択可能な数を制限できます。

Quformの場合、サーバーレベルでも選択可能な数を制限するコードを追加できます。

add_filter('quform_element_valid_1_3', function ($valid, $value, Quform_Element_Multiselect $element) {
    if (is_array($value) && count($value) > 2) {
        $element->addError('You can choose upto two options');
        $valid = false;
    }
 
    return $valid;
}, 10, 3);

このコードはQuformで提示されたコードで、実際にうまく機能しているかどうかを確認していません。フォームを送信しようとすると、検証中に警告メッセージが表示されます。うまくいかない場合は、上記のコードを適切に適用して状況に合わせて修正してください。

参照

コメントを残す

コメントを残す