Is there a way by which I can validate select two only to allow a minimum number of selection length as it has for maximumSelectionLength.

I have tried minimumSelectionLength but it does not work for me :

<link rel="stylesheet" type="text/css" href="select2/select2.min.css" />
<script src="select2/select2.min.js" type="text/javascript"></script>

<script type="text/javascript">
    $(document).ready(function() {
      $(".selecte").select2();
      maximumSelectionLength: 15;

    });
</script>

So I want the button not to submit until the user selects up to like 3 items.

Any ideas or suggestion.

Is there a way by which I can validate select two only to allow a minimum number of selection length as it has for maximumSelectionLength.

I have tried minimumSelectionLength but it does not work for me :

<link rel="stylesheet" type="text/css" href="select2/select2.min.css" />
<script src="select2/select2.min.js" type="text/javascript"></script>

<script type="text/javascript">
    $(document).ready(function() {
      $(".selecte").select2();
      maximumSelectionLength: 15;

    });
</script>

So I want the button not to submit until the user selects up to like 3 items.

Any ideas or suggestion.

• javascript
• jquery
• html
• select
• html-select

3 Answers 3

select2 plugin don't have any attribute for this purpose so you could validate the select element want in submit event make you condition then submit when it's achieved :

$('form').on('submit', function(){
     var minimum = 3;

     if($(".selecte").select2('data').length>=minimum)
         return true;
     else 
         return false;
});

Hope this helps.

$(".selecte").select2();

$('form').on('submit', function(){
     var minimum = 2;

     if($(".selecte").select2('data').length>=minimum){
         alert('Submited...')
         return true;
     }else {
     	 alert('Please shoose at least '+minimum+' item(s)')
         return false;
     }
})

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare./ajax/libs/select2/3.2/select2.css" rel="stylesheet"/>
<script src="http://cdnjs.cloudflare./ajax/libs/select2/3.2/select2.min.js"></script>
<form>
  <select multiple class="selecte" style="width:300px">
    <option value="AL">Alabama</option>
    <option value="Am">Amalapuram</option>
    <option value="An">Anakapalli</option>
    <option value="Ak">Akkayapalem</option>
    <option value="WY">Wyoming</option>
  </select>
  
  <br>
  
  <input type='submit' />
</form>

    var min = 1; 
    $('input[type="submit"]').on('click', function(event){
        if ($('#group_select option:selected').size() < min) {
            alert("Need at least one group");
            event.preventDefault();
        }
    });

Popup a alert if the min requirement is not satisfied.

Use .val() in your JS to get the value of the input, after that you can use regex in an if statement that if it returns true ( meets the value requirement set by regex ) then it will submit. You can use console.log() the value, to see what data you are working with. (regex101. is a great place to build your regex code.)