enforce values in html5 datalist with javascript

Question

How can I get this working on my website - not just jsfiddle?

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.

I have this working in jsFiddle ( http://jsfiddle.net/9DG5m/1/ ), but can't get it to work on my website ( http://austinsamsel.com/test/vanity/index-form.html ) . I looked for errors with firebug and didn't find anything. Been stuck on this a couple hours. ~noob

the script and form :

 <script type="text/javascript"> // 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 < 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 < 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.'); } }); } </script> <form id="type_form" method="post" > <input id="nav" list="optionzzz" maxlength="10" class="mustbe" type="text" autocomplete="off" name="nav" placeholder="TYPE YOUR CHOICE... (spelling counts)" autofocus required> <datalist id="optionzzz"> <option value="OPTION1"> <option value="OPTION2"> <option value="OPTION3"> <option value="OPTION4"> <option value="OPTION5"> </datalist> <script type="text/javascript"> if (!("autofocus" in document.createElement("input"))) { document.getElementById("nav").focus(); } </script> <button class="send" type="submit">SEND</button></form>

Answer 1

Another way to enforce choosing from a datalist is to have every item of the datalist appear in the pattern property of the input as well. Example:

 <form> <input required list="datalist" pattern="one|two|three" name="me"> <datalist id="datalist"> <option value="one"> <option value="two"> <option value="three"> </datalist> <button type="submit">Submit</button> </form>

Answer 2

The solution is to move your inline script to end of page so it would be

   <script type="text/javascript">
      // Find all inputs on the DOM which are bound to a datalist via their list attribute.
      var inputs = document.querySelectorAll('input[list]');
      ....
   </script>
</body>
</html>

because the script is executing on elements which are not loaded yet, so during this

var inputs = document.querySelectorAll('input[list]');

there are no inputs yet loaded.

You can also include the function in

$(document).ready(function () { .. //your function will come here }

so this will be executed when dom is ready