Walidacja wartości pola input z listą

Witam,

Mam następujący formularz:

<form action="" method="post">
   <input type="text" class="form-control" list="colours" name="colours">
   <datalist id="colours">
      <option value="Red" data-id="1">
      <option value="Blue" data-id="2">
      <option value="Green" data-id="3">
      <option value="Black" data-id="4">
      <option value="White" data-id="5">
   </datalist>
   <button type="submit" class="btn btn-info" name="confirm">Zapisz</button>
</form>

1. W jaki sposób sprawić by przycisk Zapisz był nieaktywny do momentu w którym wpisana wartość w polu input będzie zgodna z jedną i tylko jedną z opcji datalist?
2. W jaki sposób przekazać do formularza wartość z data-id, a nie value?

Z góry dziękuję za wszelką pomoc.

Kilka dni temu był bardzo podobny wątek - czy zapoznałeś się z nim?
wlaczony/wylaczony buttton

cerrato napisał(a):

Kilka dni temu był bardzo podobny wątek - czy zapoznałeś się z nim?
wlaczony/wylaczony buttton

Tak, jednak w tamtym przypadku rozwiązanie problemu poszło w innym kierunku. Ponadto w JS jestem lamą. Przeczytam, ale ze stworzeniem czegoś samemu już gorzej

Jeśli chcesz się bawić - wrzuć swój przykład ja jsfiddle.net .

Zrobimy tak samo jak w tamtym wątku z @jan kowal i @stivens i będziemy przechodzili przez to krok po kroku. Bo jeśli liczysz na gotowiec to sorry, ale nie pomogę ;)

Na tą chwilę mam coś takiego:

<form>
  <input id="input" type="text" class="form-control" list="colours" name="colours" autocomplete="off">
  <datalist id="colours">
    <option value="Red" data-id="1">
    <option value="Blue" data-id="2">
    <option value="Green" data-id="3">
    <option value="Black" data-id="4">
    <option value="White" data-id="5">
  </datalist>
  <button id="subBut" disabled type="submit" class="btn btn-info" name="confirm">Zapisz</button>
</form>

window.onload = function () {
  document.getElementById("input").addEventListener('change', myFunction);

  function myFunction() {
    document.getElementById("subBut").disabled = true;
    var options = document.getElementById("colours").options;
    var selectionMade = false;
    var selectedValue = "";

    for (var i = 0; i < options.length; i++) {
      if(document.getElementById("input").value.toUpperCase() == options[i].value.toUpperCase()) {
        selectedValue = document.getElementById("input").value;
        selectionMade = true;
        document.getElementById("subBut").disabled = false; 
      } 
    }
  }
  
}

Załatwia to problem postawiony w punkcie pierwszym.
Jeśli chodzi o pytanie #2. Czy jest jakiś sposób przy przekazać do formularza wartość data-id czy trzeba pójść w kierunku stworzenia <input type="hidden" value="data-id"> w momencie wybrania poprawnej opcji?

JSFiddle: http://jsfiddle.net/js68e26j/22/

Dlaczego robisz to jako <datalist> a nie <select>?

Czy jest to celowe działanie, czy raczej przeoczenie/pomyłka? Skoro i tak podpowiadasz użytkownikowi teksty do wpisania, no i tylko podane przez Ciebie kolory mają określone wartości, nie wiem czy możliwość wpisania czegokolwiek spoza listy jest działaniem pożądanym, czy raczej przeoczeniem.
Moim zdaniem, skoro masz jakieś gotowe wartości do wyboru, select jest lepszą opcją.

cerrato napisał(a):

Dlaczego robisz to jako <datalist> a nie <select>?

Czy jest to celowe działanie, czy raczej przeoczenie/pomyłka? Skoro i tak podpowiadasz użytkownikowi teksty do wpisania, no i tylko podane przez Ciebie kolory mają określone wartości, nie wiem czy możliwość wpisania czegokolwiek spoza listy jest działaniem pożądanym, czy raczej przeoczeniem.
Moim zdaniem, skoro masz jakieś gotowe wartości do wyboru, select jest lepszą opcją.

Oczywiście, że to celowe działanie. Na docelowej liście, będą setki lub nawet tysiące możliwych do wybrania opcji. Korzystając z datalist użytkownik ma podpowiedzi na żywo zawężające możliwe dopasowania. Korzystając z select trzeba przewijać całą listę. Wyprzedzając: mógłbym skorzystać z jakiegoś rozbudowanego gotowca jak select2 lecz ma to być w swym założeniu jak najprostsze rozwiązanie, łatwe do sformatowania, itd.

Rzuć okiem tutaj - http://jsfiddle.net/o0jf2qs1/ i napisz, czy idziemy w dobrym kierunku?
Jeśli to, co widzisz jest OK, to trzeba jedynie zmienić akcję - zamiast pokazywania komunikatu, trzeba zmienić stan przycisku/odblokować go.

P.S. przyznaję się bez bicia, że nie ja to pisałem, a jedynie znalazłem w necie i trochę poprawiłem :(

A swoją drogą - nie wiem, czy nie byłoby lepiej, żeby zamiast wrzucać te tysiące pozycji do HTML'a skorzystać z czegoś bardziej dynamicznego - np. pobieranie sugestii przez AJAX.

Dzięki za wszelką pomoc. Sam poszperałem trochę po przykładach w internecie i rozwiązałem problem dodając linię:

var selectedDataId = options[i].getAttribute('data-id');  

i w html

<input type="hidden" id="selected-data-id" name="selected-data-id" value="0"> 

W Chrome działa rewelacyjnie. Niestety na Edge nie aktywuje przycisku :(

A swoją drogą - nie wiem, czy nie byłoby lepiej, żeby zamiast wrzucać te tysiące pozycji do HTML'a skorzystać z czegoś bardziej dynamicznego - np. pobieranie sugestii przez AJAX.

Dobry pomysł.