检测 html input required true 何时起作用

Question

我有一个表格

<form id="newRecord">
  <input type="text" required/>
</form>

<button form="newRecord" type="submit">Submit</button>

http://codepen.io/anon/pen/EZwRjK

当该字段为空时，您单击该按钮，您会看到“请填写此字段”。弹出该字段旁边。有没有办法检测该弹出窗口是否随 JavaScript 一起出现？

Answer 1

在 HTML5 中，伪类:invalid应用于触发“此字段为必填”对话框的任何输入。

如果您将侦听器放在按钮上，您可以通过检查是否有任何标记为的输入来确定对话框是否出现:invalid。

$("#newRecord input[type=submit]").click(function() {
    if ($("#newRecord input:invalid").length) {
        //The popup appeared
    } else {
        //The popup did not appear
    }
});

JSFiddle 演示