Styling jQuery Validation z Wybór2 4,0 i Bootstrap 3+

Question

Mam projektu, który używa Bootstrap 3.3.4, Wybór2 4.0 i jQuery Validation 1.13.1

mam ustawić domyślne jquery walidatora do stylu bootstrap 3 klasy jak tak

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

    } 
}); 

jednak wartości te nie styl select2 pól samo ... na obrazku poniżej, „metale” wybierz to pole bootstrap, podczas gdy „kolory” zaznaczyć to pole select2.

Próbowałem szukając inne tak, ale wszystkie z nich korzystać wersję select2

3.5.xx I obejmował jsfiddle na przykład na zdjęciu, szukam dostosowań domyślnych walidatora do mają jednolity wygląd select2

http://jsfiddle.net/z49mb6wr/

Answer 1

próbowałem szukając inne tak, ale wszystkie z nich korzystać z 3.5.xx versio n of select2

Nie ma tajnej formuły dla różnych wersji. Tylko brutalna siła, żeby to rozgryźć dla twojej sytuacji. Oznacza to, że musisz sprawdzić renderowany DOM, aby wiedzieć, które elementy kierować i jak je kierować.

1. Napisz CSS, który jest skierowany do renderowanego elementu Select2. Jeśli więc pojemnik nadrzędny ma klasę has-error, element Select2 będzie stylizowany jako taki.

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

2. Aby otrzymać komunikat o błędzie, aby wyświetlić po element Wybór2 prostu wymaga innego warunkowego w opcji errorPlacement wraz z kilkoma jQuery DOM przechodzenie.

   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. I wreszcie, od interakcji z Select2 nie ma żadnych zdarzeń, które plugin jQuery Walidacja automatycznie rejestruje, trzeba będzie napisać procedurę obsługi zdarzenia niestandardowego i programowo wywołać walidacji.

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

roboczy DEMO: http://jsfiddle.net/z49mb6wr/1/

Answer 2

odpowiedź Sparky jest po prostu nie działa dla mnie, więc modyfikować go do poniżej:

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

Niewielka modyfikacja @Sparky's solution - Nie biorę kredytu poza ustaleniem, że klasy error i valid są używane przez ostatnie j validate query (: P), a na bieżąco:

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

Teraz kod:

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

Zastosowanie CSS na error klasy jak wam się podoba.