Question

我正在尝试在点击时验证包含在3个不同输入中的文本。输入使用html5数据列表，因此您可以在预先填充的列表中键入或选择所需的值。

除了我想点击输入中包含的文本以验证无法从列表中提交文本外，所有内容都正常“正常”。

我在这里找到并尝试了这个问题的代码：

How can i validate the input from a html5 datalist?

我觉得它适用于那个人，但我的问题是我有3个不同的字段来验证，我不确定哪个是最好的方法，因为它必须允许人们提交空值或列表，不是键入但未找到的内容。

这是我到目前为止尝试过的代码：

$('#click').click(function () {
        var tag1 = $("#tag1").val() + " ";
        var tag2 = $("#tag2").val() + " ";
        var tag3 = $("#tag3").val();

        var obj1 = $("#tags").find("option[value='" + tag1 + "']");
        var obj2 = $("#tags").find("option[value='" + tag2 + "']");
        var obj3 = $("#tags").find("option[value='" + tag3 + "']");

        var objects = obj1 + obj2 + obj3;

        if (objects != null && objects.length > 0)
            alert("valid");
        else
            alert("invalid");
})

这里有一个jsfiddle来查看代码：http://jsfiddle.net/j7ehtqjd/69/

由于

修改

感谢您的建议，我更改了代码，但仍然无效。这是要检查的新小提琴：http://jsfiddle.net/0dghofgk/

Answer 1

首先，我从datalist元素中读取所有可接受的值。

<datalist id="languages">
    <option value="java">Java</option>
    <option value="csharp">C#</option>
    <option value="ruby">Ruby</option>
    <option value="python">Python</option>
</datalist>

这里javascripts（或JQuery）地图派上用场：

var languages = $("#languages option").map(function () {
    return this.value;
}).get();

然后通过检查输入值是否在数组中来验证是非常容易的，如下所示：

var valid = languages.indexOf(value) >= 0;

让人们输入空值。

var valid = languages.indexOf(value) >= 0 || value === "";

<强>更新

将所有代码放在一起以验证多个输入可能如下所示（请参阅内联注释）：

// getting all valid values
var languages = $("#languages option").map(function () {
    return this.value;
}).get();

$("form").on('submit', function (e) {   
    var allValid = $("input").filter(function (key, element) {
        var value = $(element).val();

        // here we filter out all valid input fields
        return value !== "" && languages.indexOf(value) < 0;
    }).length === 0;  // and check if anything else left
                      // if not then form is valid

    $(".validation-result").toggleClass("hidden", allValid);

    e.preventDefault();
});

UPDATED JSFiddle Demo

如何使用html5 datalist正确验证单击时的多个输入

1 个答案: