Styling jQuery Validation con Select2 4.0 e Bootstrap 3+

Question

Ho un progetto che utilizza Bootstrap 3.3.4, Select2 4,0, e jQuery convalida 1.13.1

ho impostato le impostazioni predefinite jquery validatore per bootstrap stile 3 classi come così

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

    } 
}); 

Ma queste impostazioni predefinite non select2 stile campi nella stessa ... nell'immagine qui sotto, i "metalli" Select è un campo di bootstrap, mentre i "colori" Select è un campo select2.

Ho provato a cercare altri SO di, ma tutti questi utilizzare la versione 3.5.xx di select2

ho incluso un jsfiddle dell'esempio nella foto, sto cercando adattamenti dei default validatore per hanno select2 aspetto uniforme

http://jsfiddle.net/z49mb6wr/

Answer 1

ho provato a cercare altri SO di, ma tutti questi usa la 3.5.xx Versio n di select2

Non esiste una formula segreta per varie versioni. Solo forza bruta per capirlo per la tua situazione. Ciò significa che devi ispezionare il DOM renderizzato in modo da sapere quali elementi puntare e come individuarli.

1. Scrivere CSS che mira all'elemento Select2 sottoposto a rendering. Quindi, ogni volta che il contenitore genitore ha la classe has-error, l'elemento Select2 sarà stilizzato come tale.

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

2. Per ottenere il messaggio di errore per visualizzare dopo l'elemento Select2 richiede semplicemente un altro condizionale all'interno dell'opzione errorPlacement insieme ad alcuni jQuery DOM traversal.

   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. E infine, poiché l'interazione con il Select2 non ci sono eventi che il plugin jQuery Convalida acquisisce automaticamente, si dovrà scrivere un gestore di eventi personalizzati e di programmazione innescare la convalida.

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

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

Answer 2

risposta di Sparky semplicemente non ha funzionato per me, così ho modificato al di sotto:

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

Una piccola modifica al @Sparky's solution - Non prendo il merito tranne che per capire che le classi error e valid sono usate dalle ultime j interrogazione validate (: P) come alla data:

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

Ora Codice:

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

Usa CSS su error classe come ti piace.