web-dev-qa-db-ja.com

Select24.0およびBootstrap 3+を使用したjQuery検証のスタイリング

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

Jqueryバリデーターのデフォルトをstyle bootstrap 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」selectはbootstrapフィールドであり、「colors」selectはselect2フィールドです。

enter image description here

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

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

http://jsfiddle.net/z49mb6wr/

jquerycsstwitter-bootstrap-3jquery-validatejquery-select2-4
9
Jay Rizzi

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

さまざまなバージョンの秘密の公式はありません;状況に応じてそれを理解する必要があります。つまり、レンダリングされたDOMを検査して、ターゲットにする要素とそれらをターゲットにする方法を知る必要があります。

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

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

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

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

    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/

23
Sparky

@ Sparkyのソリューション への小さな変更-errorクラスとvalidクラスが最新のjqueryvalidate（：P ）日付どおり：

/*! jQuery Validation Plugin - v1.16.0 - 12/2/2016
 * http://jqueryvalidation.org/
 * Copyright (c) 2016 Jörn Zaefferer; Licensed MIT */

今コード：

$('#MyForm').validate({
    errorPlacement: function (error, element) {
        if (element.parent('.input-group').length) { 
            error.insertAfter(element.parent());      // radio/checkbox?
        } else if (element.hasClass('select2-hidden-accessible')) {     
            error.insertAfter(element.next('span'));  // select2
            element.next('span').addClass('error').removeClass('valid');
        } else {                                      
            error.insertAfter(element);               // default
        }
    }
});

// add valid and remove error classes on select2 element if valid
$('.select2-hidden-accessible').on('change', function() {
    if($(this).valid()) {
        $(this).next('span').removeClass('error').addClass('valid');
    }
});

errorクラスでCSSを自由に使用してください。

2
Fr0zenFyr

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);
}
2
adamj