walidacja pola select multiple

0

Witajcie.
Mam problem z walidacją.
W jaki sposób pobrać zaznaczenia z pola <select multiple> i przyrównać je do tablicy popr = ["Huston Rockets","Chicago Bulls","Portland Trail Blazers"]?

<form name="quiz" action="" method="post">
  <div id="pyt3">
    <label for="pytanie3">3. Wybierz drużyny w których grał Scottie Pippen?</label><br>
      <select name="pytanie3" multiple>
        <option value="Los Angeles Lakers">Los Angeles Lakers</option>
        <option value="Huston Rockets">Huston Rockets</option>
        <option value="Golden State Wariors">Golden State Wariors</option>
        <option value="Chicago Bulls">Chicago Bulls</option>
        <option value="Oralndo Magic">Orlando Magic</option>
        <option value="Boston Celtics">Boston Celtics</option>
        <option value="Portland Trail Blazers">Portland Trail Blazers</option>
      </select> <hr>
  </div>
</form>

Z góry dziękuję za pomoc

1

Jak pobierzesz kontrolkę z formularza

const form = document.querySelector('form[name="quiz"]');
const select = form.querySelector(':scope select[name="pytanie3"]');

to będziesz miał dostęp do właściwości select.options i select.selectedOptions

select.options -> przechowuje wszystkie znaczniki <option> z danego pola
select.selectedOptions -> przechowuje wszystkie zaznaczone <option> z danego pola

Tutaj masz opis wszystkich dostępnych właściwości https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement

Z walidacją pola mogę Ci pomóc jeśli wstawisz jeszcze jakiś kod javascript, który masz już zrobiony.

0
  let form = document.querySelector('form[name="quiz"]'); 
  let select = form.querySelector(':scope select[name="pytanie3"]');
  let wybOpcje = select.selectedOptions;
  

I teraz w jaki sposób sprawdzić czy wybOpcje == popr ?

1

Jeśli to cały kod jaki masz to najpierw musisz podpiąć event przez addEventListener.

W zależności od tego na jakim etapie ma być ta walidacja https://www.w3schools.com/jsref/dom_obj_event.asp to będzie to inny event

submit -> podczas wysłania formularza, ale tutaj przydałby się jeszcze jakiś przycisk
change -> gdy wartość pola zostanie zmieniona
blur -> gdy pole traci focus
...
itd

W moim przykładzie walidacja wygląda w taki sposób, że muszą zgadzać się wszystkie trzy zaznaczone wartości z tą tablicą "popr", którą podałeś.

const form = document.querySelector('form[name="quiz"]'); 
const select = form.querySelector(':scope select[name="pytanie3"]');

const popr = ["Huston Rockets","Chicago Bulls","Portland Trail Blazers"];

const checkSelectValue = (event) => {
   const selectedOptions = [...event.target.selectedOptions];
  
   if (popr.length !== selectedOptions.length) {
     // Tutaj sprawdzamy, czy obie tablice różnią się długością. Jeśli tak to coś robimy i wychodzimy z eventu
     
     return;
   }
  
  if (selectedOptions.some((option) => !popr.includes(option.value))) {
    // Tutaj sprawdzamy, czy wszystkie zaznaczone opcje zgadzają się z tablicą "popr".
    
    return;
  }
}

select.addEventListener('blur', checkSelectValue);

Jeszcze trzeba będzie wyświetlić jakiś komunikat użytkownikowi, bo sam komentarz w kodzie mu raczej nie pomoże i nie będzie wiedział co jest źle.

1 użytkowników online, w tym zalogowanych: 0, gości: 1