CODEWITHSUNDEEP
javascripthtmlforms
paris
paris

Reputation: 189

enforce values in html5 datalist with javascript

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>

Upvotes: 1

Views: 2971

Answers (2)

Martlark
Martlark

Reputation: 14581

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>

Upvotes: 4

Raunak Kathuria
Raunak Kathuria

Reputation: 3225

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

Upvotes: 1

Related Questions