数据列表选项需要脚本验证

Question

<form action="order.php" method="post" name="myForm" id="dropdown" onsubmit="return(validate());">
    <input list="From" name="From" autocomplete="off" type="text" placeholder="From Place">
    <datalist id="From">
        <option value="Stand">
        <option value="Hospital">
    </datalist>
</form>

<小时/> 脚本验证：

<script>
    if (document.myForm.From.value == "") {
        alert("Please select From Place.!");
        return false;
    }
</script>

如果为null，则给出错误消息：

  

请选择From Place。！

用户的输入也在打印......但我需要选项值才能打印ie。 ＆＃34; Stand＆＃34;，＆＃34; Hospital＆＃34; ...
我还删除了type="text"，但它没有改变任何内容。

Answer 1

提交时，您需要在datalist选项中循环：

<强> HTML

<form>
    <input list="datalist" id="input"> 
    <datalist id="datalist"> 
        <option value="Internet Explorer">
        <option value="Firefox">
        <option value="Chrome">
        <option value="Opera">
        <option value="Safari">
  </datalist>
</form>

<button onclick="myFunction()">Check</button>

<p id="result"></p>

<小时/> 的 JS

function myFunction() {
    var options = document.getElementById("datalist").options;
    var result = false;

    for (var i = 0; i < options.length; i++) {
        if(document.getElementById("input").value == options[i].value) {
        result = true;
      }
    }

    document.getElementById("result").innerHTML = "Validate : " + result + ".";
}

然后您可以使用Boolean进行验证。

您可以在this fiddle上看到结果。