Select2 with parsley check

Question

I searched the network, but I can’t find a way to test select2 using parsley, the discussion here doesn’t work Select2 check and force the user to select the very youngest items of X, this is very frustrating since I need the user to select at least 1 of parameters. Can anyone provide me with any job?

Help rate!

Thanks,

Answer 1

There are several reasons why your custom validator may not work.

(1) Make sure that you are using the correct instructions for the version of parsley.js that you are using. I believe that the attributes were not the prefix "data-" for versions 1.x, but for versions 2.x.

(2) The code shown in the stackoverflow answer file you are connecting to should appear before you enable parsley.js. The code should be different if it appeared after you included parsley.js.

Here's what the code looks like if it appears after you turn on parsley.js:

window.ParsleyValidator .addValidator('minSelect', function(value, requirement) { return value.split(',').length >= parseInt(requirement, 10); }, 32) .addMessage('en', 'minSelect', 'You must select at least %s.'); 

(3) Parsley does not seem to check for hidden input elements. Therefore, if you support your Select2 control with hidden input (unlike the <select> element), change it to the <input type="text"> element. It will still work with Select2, but parsley will check it.

 <input type="text" id="select" name="x" value="" data-parsley-minSelect="2" data-parsley-validate-if-empty="true" /> 

(4) By default, parsley will not use your custom validator when the element value is empty unless you include the data-parsley-if-empty attribute.

jsfiddle

Answer 2

I fixed my case only with CSS :

 .sel2 .parsley-errors-list.filled { margin-top: 42px; margin-bottom: -60px; } .sel2 .parsley-errors-list:not(.filled) { display: none; } .sel2 .parsley-errors-list.filled + span.select2 { margin-bottom: 30px; } .sel2 .parsley-errors-list.filled + span.select2 span.select2-selection--single { background: #FAEDEC !important; border: 1px solid #E85445; } 

and my select element:

 <div class="sel2"> <select id="select-country" class="select2_single form-control" tabindex="-1" required> ... </select> </div> 

and assign select2:

  <script> $(document).ready(function () { $(".select2_single").select2({ placeholder: "Select from the list", allowClear: true }); }); </script>