11

Bootstrap 3.3.4、Select2 4.0、および Jquery Validation 1.13.1 を使用するプロジェクトがあります。

jqueryバリデーターのデフォルトを、ブートストラップ3クラスのスタイルに設定しました

 $.validator.setDefaults({
    errorElement: "span",
    errorClass: "help-block",

    highlight: function (element, errorClass, validClass) {
    $(element).addClass(errorClass);
        $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
    },
    unhighlight: function (element, errorClass, validClass) {
    $(element).removeClass(errorClass);
        $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
    },

    errorPlacement: function(error, element) {
        if(element.parent('.input-group').length) {
           error.insertAfter(element.parent());
        } else {
            error.insertAfter(element);
        }

    }
});

しかし、これらのデフォルトはselect2フィールドを同じスタイルに設定しません...下の画像では、「metals」選択はブートストラップフィールドですが、「colors」選択はselect2フィールドです。

ここに画像の説明を入力

他の SO を検索してみましたが、これらはすべて select2 の 3.5.xx バージョンを使用しています

写真の例の jsfiddle を含めました。select2 が均一に見えるようにバリデーターのデフォルトを調整したいと考えています。

http://jsfiddle.net/z49mb6wr/

4

5 に答える 5

25

他のSOを検索してみましたが、これらはすべてselect2の3.5.xxバージョンを使用しています

さまざまなバージョンに秘密の公式はありません。あなたは自分の状況に合わせてそれを理解する必要があります。つまり、レンダリングされた DOM を調べて、対象とする要素とそれらを対象とする方法を把握する必要があります。

以下のコードがうまくいくとは言いません。これは、この状況を攻撃する方法の単なる例です。

  1. レンダリングされた Select2 要素を対象とする CSS を記述します。したがって、親コンテナーに class がある場合は常に、has-errorSelect2 要素がそのようにスタイル設定されます。

    .has-error .select2-selection {
    border: 1px solid #a94442;
    border-radius: 4px;
}

  2. Select2 要素の後にエラー メッセージを表示するには、errorPlacementオプション内に別の条件と jQuery DOM トラバーサルが必要です。

    errorPlacement: function (error, element) {
    if (element.parent('.input-group').length) { 
        error.insertAfter(element.parent());      // radio/checkbox?
    } else if (element.hasClass('select2')) {     
        error.insertAfter(element.next('span'));  // select2
    } else {                                      
        error.insertAfter(element);               // default
    }
}

  3. 最後に、Select2 とのやり取りには、jQuery Validate プラグインが自動的にキャプチャするイベントがないため、カスタム イベント ハンドラーを作成し、プログラムで検証をトリガーする必要があります。

    $('.select2').on('change', function() {
    $(this).valid();
});

動作デモ: http://jsfiddle.net/z49mb6wr/1/

于 2015-06-11T15:37:41.200 に答える
2

Sparky の回答がうまくいかなかったので、以下のように変更しました。

if (element.hasClass('select2-hidden-accessible')) {
    error.insertAfter(element.closest('.has-error').find('.select2'));
} else if (element.parent('.input-group').length) { 
    error.insertAfter(element.parent());
} else {                                      
    error.insertAfter(element);
}
于 2016-12-02T01:06:20.743 に答える
0

ここで提案されているすべてのソリューションを 4.1 RC0 で試してみましたが、どれもうまくいかないようです。私はJqueryを使用しているので（必須です）、ここに私の解決策があります：「error-insert-after」という名前のクラスを持つdivの後に置き、errorPlacementに次のものがあります：

errorPlacement: function (error, element) {
            // Add the `invalid-feedback` class to the error element
            error.addClass("invalid-feedback");
            if (element.prop("type") === "checkbox") {
                error.insertAfter(element.next("label"));
            } else {
                error.insertAfter(element);
            }
            if (element.hasClass('select2-hidden-accessible')) {
                error.insertAfter($('.error-insert-after'));
            } else if (element.parent('.input-group').length) {
                error.insertAfter(element.parent());
            } else if (element.prop('type') === 'radio' && element.parent('.radio-inline').length) {
                error.insertAfter(element.parent().parent());
            } else if (element.prop('type') === 'checkbox' || element.prop('type') === 'radio') {
                error.appendTo(element.parent().parent());
            } else {
                error.insertAfter(element);
            }

検証するフィールドは 1 つしかないので、それで十分です。なんらかの理由で、次が機能しません。それは私の設定かもしれませんが、誰かの役に立てば大歓迎です。

于 2021-11-15T12:11:07.787 に答える