如何验证html5 Datalist的输入？

Question

我想知道如何验证来自a的输入值Datalist.我的意思是,如果我有一个Datalist用户可以开始写入值然后从中选择它的位置Datalist,但是用户决定不从列表中选择任何值并且他提交具有不完整值的表单,则发送值会错的.

我想过迭代所有的元素,Datalist但我认为如果Datalist有超过1.000的值并且我不知道任何其他方式来验证它,这不是一个好主意.

这是Datalist我要使用的一个例子:

<input type="text" list="colours">

<datalist id="colours">
    <option value="Red" data-id="1">
    <option value="Blue" data-id="2">
    <option value="Green" data-id="3">
    <option value="Black" data-id="4">
    <option value="White" data-id="5">
</datalist>

Answer 1

您可以使用 HTML5 验证来完成此操作pattern。如果您使用某种模板填充数据列表会更容易，但它看起来像这样（请注意，您需要额外的代码来处理验证 - 我只是添加了非常简单的 CSS 来显示验证状态）

值得注意的是，这会自动阻止表单提交，并为可访问性和其他符合标准的互操作性提供适当的语义。

input:valid {
  border: 1px solid green;
}
input:invalid {
  border: 1px solid red;
}

<input type="text" list="colours"
pattern="^(Red|Blue|Green|Black|White)$"
>

<datalist id="colours">
    <option value="Red" data-id="1">
    <option value="Blue" data-id="2">
    <option value="Green" data-id="3">
    <option value="Black" data-id="4">
    <option value="White" data-id="5">
</datalist>

Answer 2

试试这个:

<input type="text" list="colours" id='txt'>

在表单提交您可以检查:

var val = $("#txt").val();

var obj = $("#colours").find("option[value='" + val + "']");

if(obj != null && obj.length > 0)
    alert("valid");  // allow form submission
else
    alert("invalid"); // don't allow form submission

Answer 3

我想分享一个非 jquery 的替代方案，仅在 Js 中：

function is_valid_datalist_value(idDataList, inputValue) {
  var option = document.querySelector("#" + idDataList + " option[value='" + inputValue + "']");
  if (option != null) {
    return option.value.length > 0;
  }
  return false;
}

function doValidate() {
  if (is_valid_datalist_value('colours', document.getElementById('color').value)) {
    alert("Valid");
  } else {
    alert("Invalid");
  }
}

<form onsubmit="return false">
  <input type="text" id="color" list="colours">
  <datalist id="colours">
    <option value="Red" data-id="1" />
    <option value="Blue" data-id="2" />
    <option value="Green" data-id="3" />
    <option value="Black" data-id="4" />
    <option value="White" data-id="5" />
    </datalist>
  <button onclick="doValidate();">Send</button>
</form>