使用datalist验证 [英] Validation with datalist

问题描述

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

I want to validate my input datalist so that it will only be submitted when one of the elements is selected from the list. If not submit then I want to give a red error message next to the input element so the user understands what he did wrong.

示例：

    <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 ？

I wonder if it is possible with datalist?

如果有人能帮助我，我将非常感激。

If anyone can help me, I would be very grateful.

编辑：
我想验证代码，现在应该是否有选项，或者什么都没有输入，更像这样回答我发现
需要进行Datalist选项验证
然而它给了一个流行音乐向上窗口，我现在不知道如何在输入旁边只显示一条错误信息。

edit: I want to validate the code, it should now if it is on of the options or not, or when nothing was inputed, more like this answer I found Datalist option validation required however it give a pop up window, and I do not now how to show next to the input only a error message.

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

I must not use an additional library.

推荐答案

您可以通过将输入值与您想要允许的值进行比较来实现，正如我在下面的代码片段中所做的那样，但我认为如果您想为用户提供受限制的选项列表，那么简单的< select> 比带有数据列表的输入更合适。

You could do it by comparing the input's value with those you want to allow, as I've done in the code snippet below, but I think a simple <select> would be more appropriate than an input with a datalist if you want to give users a restricted list of options.

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>

这篇关于使用datalist验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！