Как сделать выбранную опцию необходимой в теге select с несколькими атрибутами

Question

Я хочу создать условие, которое позволило бы пользователю выбрать минимум 3 варианта из тега select с несколькими атрибутами, но параметры поступают динамически из тега input после ввода запятой (,). например, если пользователь вводит hello, а затем набирает запятую (,), значение hello будет отображаться в теге option. Итак, как я могу выбрать свой вариант и выбрать минимум 3 варианта. вот мой код

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

Используйте свойство selectedOptions элемента в событии отправки. См. Следующий фрагмент

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>