javascript - 如何使用 JQuery 设置其他字段 oninput 的属性？

Question

我有三个输入，我试图让用户可以输入任意数量的输入，但至少输入一个，以便进行搜索。后端的构建是为了很好地从 URL 解析这些内容，但我在客户端遇到了麻烦。

现在，我正在使用 oninvalid 和 oninput，如下所示:

<input type="text" id="Input1" name="Input1" required oninvalid=
"setCustomValidity('Please enter a valid Input1')" oninput="setCustomValidity('')"/>

我想要做的是，在这个包含 3 个输入的包中，将其他两个输入设置为不需要，并将 setCustomValidity 值设置为 >'' 当在其中一个字段中输入值时。我还希望它能够重新建立这些规则，例如，如果用户在输入错误的字段后改变了主意。

我现在拥有的 JQuery:

jQuery(function ($) {
            var $inputs = $("#Input1, #Input2, #Input3")
            $inputs.oninput = (function () {
                // Set the required property of the other input to false if this input is not empty.
                $inputs.not(this).prop('required', false)
                $inputs.not(this).prop("setCustomValidity", "")
            });
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form action="" method="get">

<input type="text" id="Input1" name="Input1" required oninvalid="setCustomValidity('Please enter a valid Input1, 2, or 3')" oninput="setCustomValidity('')"/>

<input type="text" id="Input2" name="Input2" required oninvalid="setCustomValidity('Please enter a valid Input1, 2, or 3')" oninput="setCustomValidity('')"/>

<input type="text" id="Input3" name="Input3" required oninvalid="setCustomValidity('Please enter a valid Input1, 2, or 3')" oninput="setCustomValidity('')"/>

<input type="submit" value="Submit" />
</form>

一切似乎都在 Razor Pages 等中正确编译，没有错误，但所需的属性没有被删除或更改。如果有人能够深入了解我做错了什么，那就太好了；一般来说，我对 JS 和 JQuery 很陌生，但我可以看到它的强大功能。

Answer 1

setCustomValidity 不是属性或属性，而是从 oninvalid 属性调用的函数。所以应该是:

$inputs.not(this).removeAttr("oninvalid");

当您想重新建立它时，请使用:

$inputs.not(this).attr("oninvalid", "setCustomValidity('Please enter a valid Input1')");

但我不确定您是否需要这样做。一旦你不再需要它，它就永远不会触发“无效”事件。因此您根本不需要删除它。

您还可以使用 jQuery 事件监听器来执行此操作。添加处理程序:

$elements.on("invalid", function() {
    this.setCustomValidity("Please enter a valid input");
}

删除它:

$elements.off("invalid");

您在 $this 的赋值中也有一个拼写错误。应该是:

var $inputs = $("#Input1, #Input2, #Input3");

并且没有 jQuery .oninput() 方法。所以应该是:

$inputs.on("input", function() {
    ...
});