Question

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

示例：

＆＃13;

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

＆＃13;

我想知道是否可以使用datalist？

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

编辑：我想验证代码，它现在应该是否是选项，或者什么都没有输入，更像是我找到的这个答案 Datalist option validation required 但是它给出了一个弹出窗口，我现在不知道如何在输入旁边只显示错误信息。

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

Answer 1

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

＆＃13;

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";

}

＆＃13;

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

＆＃13;

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

＆＃13;

使用datalist验证

1 个答案: