Styling jQuery Validation with Select2 4.0 and Bootstrap 3+

Question

I have a project that uses Bootstrap 3.3.4, Select2 4.0 and JQuery Validation 1.13.1

I set default values ​​for jquery validator for bootstrap styles of 3 classes like this

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

But these default values ​​do not change the select2 field ... in the image below, the metals select the load field, and the color select2 field.

I tried looking for other SOs, but they all use version 3.5.xx select2

I included jsfiddle in the example shown in the figure, I am looking for settings for the default values ​​for the validator to select select2 look uniform

http://jsfiddle.net/z49mb6wr/

Answer 1

I tried looking for other SOs, but they all use version 3.5.xx select2

There is no secret formula for the various versions. Just brute force to figure it out for your situation. This means that you need to check the rendered DOM so that you know which elements should be targeted and how to set them up.

• Write CSS that targets the rendered Select2 element. Therefore, when the parent container has the has-error class, the Select2 element will be created as such.

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

• To get an error message to display after the Select2 element simply requires a different conditional condition in the errorPlacement option, as well as some workaround for the jQuery DOM.

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

• And finally, since interaction with Select2 does not have events that the jQuery Validate plugin automatically captures, you will have to write a special event handler and programmatically run the check.

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

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

Answer 2

Sparky's answer just didn't work for me, so I changed it to the following:

 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

A small modification to @Sparky solution - I do not take credit, except for finding out that the error and valid classes are used by the last jquery validate (: P) as of date:

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

Now the code:

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

Use CSS in the error class, as you wish.