javascript - 使用 datalist 进行验证

Question

我想验证我的输入数据列表，以便仅在从列表中选择一个元素时提交它。如果不提交，那么我想在输入元素旁边给出一条红色错误消息，以便用户了解他做错了什么。

例子：

    <input  type="text" list="typ" name="name" placeholder="gtown" > 
        <datalist id="typ">
           <select name="name"> 
              <option value="atown">atown</option> 
              <option value="btown">btown</option> 
              <option value="ctown">ctown</option> 
           </select> 
        </datalist> 
    </input>

我想知道datalist是否可以？

如果有人可以帮助我，我将不胜感激。

编辑：我想验证代码，如果它是否在选项中，或者没有输入任何内容，现在应该验证代码，更像是这个 答案现在如何在输入旁边只显示一条错误消息。

Edit2：我不能使用额外的库。

标签： javascripthtml

Answer 1

您可以通过将输入的值与您想要允许的值进行比较来做到这一点，就像我在下面的代码片段中所做的那样，但我认为<select>如果您想给用户一个受限的数据列表，一个简单的比输入更合适选项列表。

let btn = document.getElementById("btnSend");
let form = document.getElementById("zeForm");
let input = document.getElementById("zeInput");
let msg = document.getElementById("msg");
let allowedValues = ["atown", "btown", "ctown"]; // same values as the options in your datalist


btn.onclick = function() {
  let allGood = false;
  
  allowedValues.forEach(function(elm) {
    if(elm === input.value) {
       allGood = true;
       return;
    }
  })

  if(allGood) {
    msg.innerHTML = "Success!!";
    msg.style.color = "green";
    //form.submit();
  } else {
      msg.innerHTML = "This value is not accepted";
      msg.style.color = "red";
  }
    msg.style.display = "inline";

}

#msg {
  display: none;
}

#btnSend {
  display: block;
  margin-top:1rem;
}

<form id="zeForm">
    <input id="zeInput" type="text" list="typ" name="name" placeholder="gtown" > 
        <datalist id="typ">
          <!-- notice the absence of a <select> here... -->
            <option value="atown">atown</option> 
            <option value="btown">btown</option> 
            <option value="ctown">ctown</option> 
        </datalist> 
    </input>
    <p id="msg"></p>
    <button id="btnSend" type="button">send</button>
  </form>