HTML5验证无效事件监听器未触发

Question

我在HTML中有一个表单，标记如下：

<form>
    <input type="text" name="fname" required>
    <input type="submit" value="Submit">
</form>

我也有两个脚本标签，一个是用于jQuery，另一个是我的JavaScript，我称之为validate.js。

<script src="jquery-2.1.4.min.js"></script>
<script src="validate.js"></script></body>

当我将以下代码放入我的validate.js文件中并提交无效数据时，页面按预期弹出“invalid”警报。

$("form input").on("invalid", function() {
     alert("invalid");
});

当我在validate.js中使用这段代码时，当我点击输入框时，页面会按预期的方式再次响应，并弹出“click”提示。

$("body").on("click", "form input", function(){alert("click");});

然而，下面的代码并没有起作用。当提交无效数据时，无效事件处理程序不会触发，并且不会像应该一样提示“invalid”。

$("body").on("invalid", "form input", function(){alert("invalid");});

我希望这样做，因为我的应用程序从ajax请求中添加表单到页面上，因此我希望将事件处理程序附加到body而不是表单本身。这样做有什么原因导致它不起作用吗？

- Dave Barnett

---

请查看setCustomValidity(error)函数。 - D4V1D

你能先将表单添加到页面中，然后动态添加字段吗？这样你就可以在表单上注册事件处理程序了。 - jonny

Answer 1

$("body").on("invalid", "form input", function(){alert("invalid");}); 这可能无法正常工作，因为这是一个实时事件，事件附加到body并触发body的invalid事件而不是form input。

$("body").on("click", "form input", function(){alert("invalid");}); 例如，如果我们将它更改为click，则事件侦听body click，然后将事件传播到form input。

尝试使用直接选择器。

- Chetan

---

谢谢。我不确定你所说的直接选择器是什么意思？ - Dave Barnett

就像你第一个alert('invalid')的例子一样。 你的表单是通过ajax加载还是即时加载的？ - Chetan

他们使用类似于 $targetDiv.replaceWith($newHtml); 的方式在表单中进行操作，其中 $newHtml 包含了我的表单和其他内容。 - Dave Barnett

所以，在替换语句之后插入无效的事件调用，这是我的意见，除非你找到其他选项。 - Chetan

好的，我明白了。我只需要添加类似于$ targetDiv.find（“form input”）。on（“invalid”，function（）{ alert（“无效”）; }）; 感谢您的帮助。 - Dave Barnett

是的，正确的做法是将其放在您的代码中'$targetDiv.replaceWith($newHtml);'语句之后。 - Chetan

Answer 2

对于任何想知道为什么这不起作用的人，原因在this的答案中：

无效事件不会冒泡，在文档中已经说明了，因此委托事件处理程序不起作用，因为事件不会冒泡。

- Slavi