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中，伪类[EBP+4]应用于触发“此字段是必需的”对话框的任何输入。

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

:invalid

JSFiddle demo

Answer 2

事实上你可以。您可以使用checkValidity()方法。如果元素包含有效数据，则返回true。

$(function() {
  $("#submit-button").click(function () {
     // using jquery
     console.log($("#input-text")[0].checkValidity());

     // using javascript
     var input = document.getElementById("input-text");
     console.log(input.checkValidity());
  });
});

this

<强>更新

使用type="button"时似乎没有显示弹出窗口。我找到的解决方法是使用$("input").on("blur", function () {代替。

现在应该是：

$(function() {
  $("input").on("blur", function () {
     console.log($("#input-text")[0].checkValidity());
     var input = document.getElementById("input-text");
     console.log(input.checkValidity());

     // checking as a whole
     console.log("Form - ", $("#newRecord")[0].checkValidity());
  });
});

Fiddle

检测何时html输入必须为true

2 个答案: