JSFiddle - React, Tailwind, and code Playground

by Richard

HTML

<form id="type_form" action="html-echo.php" method="post" onsubmit="var redir='http://localhost:8888/vanity/site/' 
      + document.getElementById('nav').value + '.php';
      setTimeout(function() { location.href=redir; }, 3000); return toSubmit();">
    <input required id="nav" list="optionzzz" maxlength="10" class="mustbe" type="text" autocomplete="off" name="nav" autofocus placeholder="TYPE YOUR CHOICE... (spelling counts)">
    <datalist id="optionzzz">
        <option value="OPTION1">
              <option value="OPTION2">
              <option value="OPTION3">
              <option value="OPTION4">
              <option value="OPTION5">
    </datalist>
                        <script>
          if (!("autofocus" in document.createElement("input"))) {
            document.getElementById("nav").focus();
          }
        </script>
    <button class="send" type="submit">SEND</button>
</form>

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.');
    }
  });
}