造型jQuery驗證與選擇二4.0和Bootstrap 3+

Question

我有一個使用引導3.3.4，選擇二4.0和jQuery驗證項目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); 
     } 

    } 
}); 

但這些默認設置並不風格選擇2域相同......下面的圖片中，「金屬」選擇是引導場，而「顏色」選擇是選擇2場。

我試圖尋找其他SO的，但所有這些使用3.5.xx版本的選擇2

我想象包括示例的的jsfiddle，我找了調整，驗證默認有選擇2看起來均勻

http://jsfiddle.net/z49mb6wr/

Answer 1

我試圖尋找其他SO的，但所有這些使用3.5.xx versio n of select2

各種版本沒有祕密公式。只需蠻力就可以知道你的情況。這意味着您需要檢查呈現的DOM，以瞭解要定位哪些元素以及如何定位它們。

1. 編寫以呈現的Select2元素爲目標的CSS。所以無論何時父容器具有類has-error，Select2元素都將按照樣式設置。

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

2. 爲了得到錯誤信息顯示後選擇二元素只需要與一些jQuery的DOM遍歷沿errorPlacement選項中的另一個條件。

   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. 最後，因爲與選擇二交互不具有的jQuery驗證插件自動捕捉任何事件，你將不得不編寫自定義事件處理程序和編程觸發驗證。

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

工作演示：http://jsfiddle.net/z49mb6wr/1/

Answer 2

斯帕克的回答只是沒有爲我工作，所以我把它修改爲以下：

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

Answer 3

一個小的修改，以@Sparky's solution - 除了弄清楚error和valid類被最新的j查詢驗證（：P）作爲日期：

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

現在代碼：error類

$('#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'); 
    } 
}); 

使用CSS讓您隨心所欲。