需要验证数据列表选项

Question

这是所有细节

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

Javascript验证

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

一切正常，但我只希望选项值，否则显示警报错误：单击“提交”按钮时

<input type="submit" value="Book Now">

我希望通过相同的脚本过程来完成...预先感谢

Answer 1

使所有选项值组成array ，并用其测试输入值。

• Array.from()方法从array-like或可迭代对象的对象创建一个新的Array实例。
• Array#map()方法创建一个new array ，其结果是对该array每个元素调用一个提供的函数。
• indexOf()方法返回可以在数组中找到给定元素的第一个索引；如果不存在，则返回-1 。

 function validate() { var fromVal = document.myForm.From.value; var toVal = document.myForm.To.value; var from = document.getElementById('From'); var to = document.getElementById('To'); var optionValuesArrFrom = Array.from(from.options).map(function(elem) { return elem.value; }); var optionValuesArrTo = Array.from(to.options).map(function(elem) { return elem.value; }); if (fromVal == "") { alert("Please select From Place.!"); return false; } else if (optionValuesArrFrom.indexOf(fromVal) === -1) { alert("item not in from list.!"); return false; } else if (toVal == "") { alert("Please select To Place.!"); return false; } else if (optionValuesArrTo.indexOf(toVal) === -1) { alert("item not in to list.!"); return false; } } 

 <form action="order.php" method="post" name="myForm" onsubmit="return(validate());"> <input type="text" list="From" name="From" autocomplete="off" placeholder="From Place"> <datalist id="From"> <option value="Bankura Bus Stand"></option> <option value="Bankura Hospital"></option> <option value="Katjuridanga"></option> <option value="Lokepur"></option> </datalist> <input type="text" list="To" name="To" autocomplete="off" placeholder="To Place"> <datalist id="To"> <option value="Bankura Bus Stand"> <option value="Bankura Hospital"> <option value="Katjuridanga"> <option value="Lokepur"> </datalist> <input type="submit" value="Book Now"> </form> 

小提琴演示