select2でカスタム検証を適用する

Question

私は今すぐうまく動作しているselect2を使用しています。 その値を空白にすることはできません。フォームの他のフィールドはフォームの他のフィールドの検証のためのコードがあらかじめ書かれているのでjQueryバリデータープラグインを使いたくないです。私はちょうどすべてのドロップダウンにselect2を適用しています。 私はネット上で解決しようとしましたが、すべての回答はjqueryバリデータープラグインを使用しています。

私のコード

$('.select2-use').select2({ 
     placeholder: "Select", 
     allowClear: true 
    }); 

<select id="type" name="type" class="form-control select2-use"> 
    <option value="">select type</option> 
    <option value="U">User</option> 
    <option value="A">Admin</option> 
</select> 

私の現在の検証は、どのように私はエラーとして赤でSELECT2スパンの境界線の色を変更することができ

if (type == '') { 
    $("#type").closest("span[class='select2-selection--single']").css('border-color','#a94442'); //which is not working 
    console.log($("#type").find('span.select2-selection--single')); 
    flag++; 
} else { 
    $('.select2-selection--single').css('border-color',''); 
} 

です。以下のコードで

Answer 1

試してみてください。私たちは、通常のdropdownselect2ドロップダウンに変換するたび

if (type == '') { 
    $("#type").next("span.select2-container").find("span[class='select2-selection--single']").css('border-color','#a94442'); 
    console.log("match found"); 
    flag++; 
} else { 
    $("#type").next("span.select2-container").find("span[class='select2-selection--single']").css('border-color',''); 
} 

。このプラグインは独自のDOM構造を作成し、元のdropdownを隠します。そのため、生成されたDOMは元のdropdownのすぐ隣に配置されます。そのDOMに対処する。 $.next()を使用してDOM内を次にトラバースする必要があり、その子要素のいずれかを$.find()で取得できます。それがあなたを助けることを願っています。

Answer 2

.select2-choiceにスタイルを適用します。

これを行うには、以下の方法が最適です。エラー状態で

.select2-container .select2-choice { 
     border: 1px solid transparent !important; 
     box-shadow: none; 
     border-radius: 0; 
    } 
    .select2-container .select2-choice.show-error { 
     border: 1px solid #EC644B !important; 
    } 

は、次の操作を行います。

は、以下のCSSクラスを追加します。それは

if (type == '') { 
    $("#type").closest(".select2-choice").css('border-color','#a94442'); //which is not working 
    flag++; 
} else { 
    $('.select2-choice').css('border-color',''); 
} 

だろうあなたのコードでは

jQuery("#yourtargetselect2 .select2-choice").addClass("show-error");