How to make option selected necessary in select tag with multiple attribute

Question

i want to make a condition that would allow a user to select minimum 3 options from select tag with multiple attribute but the options are coming dynamically from input tag after comma(,) is entered. for eg if user type hello and then type comma(,) the value hello will be displayed on option tag.so how can i make my option selected and with minimum of 3 option selected. here is my code

var skills = document.querySelector('#skills');
var skillhave = document.querySelector('#skill');
var skillshaving = [];

skills.addEventListener('keyup', function(event) {
  if (event.keyCode === 188) {

    if (this.value.length < 2) {
      alert("skill required");
      this.value = "";
    } else {
      var skill = this.value.substring(0, this.value.length - 1);
      skillshaving.push(skill);
      this.value = "";
      //reloadskills();
      addSkills(skill);
    }
  }
});
function addSkills(skill) {       
  var opt = document.createElement('option');
  opt.value = skill.toUpperCase();;
  opt.innerHTML = skill.toUpperCase();;
  opt.selected = true;
  skillhave.appendChild(opt);
}
<input type="text" class="form-control" placeholder="Enter skill" name="skills" id="skills"> <!--for entering skills via text -->

<select name="" id="skill" multiple></select>
<!--for diplaying it in option tag -->

Answer 1

Use selectedOptions property of element on submit event. See following snippet

 function submit() { const multiSelect = document.querySelector('#multi-select'); if (multiSelect.selectedOptions.length > 2) { console.log('process submit'); } else { console.log('Please select atleast 3 options'); } }

 <select id="multi-select" multiple> <option>2</option> <option>4</option> <option>6</option> <option>8</option> </select> <button onclick="submit()">Submit</button>