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

Share Improve this question Follow edited Feb 25, 2016 at 18:36 Zakaria Acharki 67.5k1515 gold badges7878 silver badges106106 bronze badges asked Feb 25, 2016 at 18:17 Omari Victor OmosaOmari Victor Omosa 2,87944 gold badges2626 silver badges5151 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

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.)