title: enforce values in html5 datalist with javascript
body: <p>How can I get this working on my website - not just jsfiddle?</p>
  <p>I am trying to make it so users can only submit an entry from the datalist - if they type it wrong then there is an error message and the form will not submit.</p>
  <p>I have this working in jsFiddle ( <a href="http://jsfiddle.net/9DG5m/1/" rel="nofollow noreferrer">http://jsfiddle.net/9DG5m/1/</a> ), but can't get it to work on my website ( <a href="http://austinsamsel.com/test/vanity/index-form.html" rel="nofollow noreferrer">http://austinsamsel.com/test/vanity/index-form.html</a> ) . I looked for errors with firebug and didn't find anything. Been stuck on this a couple hours. ~noob</p>
  <p><strong>the script and form</strong>:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;script type="text/javascript"&gt;
        
      
      // Find all inputs on the DOM which are bound to a datalist via their list attribute.
      var inputs = document.querySelectorAll('input[list]');
      for (var i = 0; i &lt; inputs.length; i++) {
        // When the value of the input changes...
        inputs[i].addEventListener('change', function() {
          var optionFound = false,
            datalist = this.list;
          // Determine whether an option exists with the current value of the input.
          for (var j = 0; j &lt; datalist.options.length; j++) {
              if (this.value == datalist.options[j].value) {
                  optionFound = true;
                  break;
              }
          }
          // use the setCustomValidity function of the Validation API
          // to provide an user feedback if the value does not exist in the datalist
          if (optionFound) {
            this.setCustomValidity('');
          } else {
            this.setCustomValidity('Spelling counts.');
          }
        });
      }
      
      &lt;/script&gt;
  
       &lt;form id="type_form"  method="post" &gt;
          
            &lt;input id="nav" list="optionzzz" maxlength="10" class="mustbe" type="text" autocomplete="off" name="nav"  placeholder="TYPE YOUR CHOICE... (spelling counts)" autofocus required&gt;
              &lt;datalist id="optionzzz"&gt;
                &lt;option value="OPTION1"&gt;
                &lt;option value="OPTION2"&gt;
                &lt;option value="OPTION3"&gt;
                &lt;option value="OPTION4"&gt;
                &lt;option value="OPTION5"&gt;
              &lt;/datalist&gt;
              &lt;script type="text/javascript"&gt;
                if (!("autofocus" in document.createElement("input"))) {
                  document.getElementById("nav").focus();
                }
              &lt;/script&gt;
            &lt;button class="send" type="submit"&gt;SEND&lt;/button&gt;&lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>