当HTML5验证失败时提醒

Question

我需要的是在html5验证失败时出现一个简单的提示框，例如:

alert("Error, please fill all required fields before submitting.");

有没有一种事件可以使用JavaScript或jQuery来显示这个警报框？

这似乎非常基础，但我在网上找不到任何相关信息。我只能找到一些改变直接出现在字段上的弹出消息的方法。

我需要这个功能是因为我的表单横跨多个选项卡，因此在用户提交表单时，可能不会始终出现显示错误消息的气泡，具体取决于用户所在的位置。

- CoqPwner

Answer 1

如果输入框未通过验证，它们会触发一个名为invalid的事件： https://developer.mozilla.org/en-US/docs/Web/Events/invalid

使用jQuery，你可以这样做：

$('input[required]').on('invalid', function(e){
  alert("Error, please fill all required fields before submitting.");
});

http://jsfiddle.net/644Lou8k/1/

这是一个链接到jsfiddle网站上的页面，可能包含一些与HTML、CSS和JavaScript相关的示例代码。

- pawel

---

我会将 $('input[required]').[...] 改为 $(':input[required]').[...]（注意冒号的添加），以包括文本区域。@pawel，请考虑编辑你的答案。 - Script47

Answer 2

对于不想使用jQuery的人：

var requiredInput = document.getElementById('requiredField');

function showAlert(){
  alert("Error, please fill all required fields before submitting.");
}

requiredInput.addEventListener("invalid", showAlert, false);

<form action="">
  <input id="requiredField" type="text" placeholder="Required input" required>
  <button type="submit">Submit</button>
</form>

- Junaid Anwar

Answer 3

当用户提交表单时，HTML5验证会启动，但不会引发任何事件。唯一的方法是像其他许多人在他们的答案中提到的那样拥有自己的JS验证。这里有一个好答案HTML5 required validation not working

HTML5表单验证过程仅限于通过提交按钮提交表单的情况。表单提交算法明确表示，当通过submit（）方法提交表单时，不执行验证。显然，如果您通过JavaScript提交表单，则应进行验证。

- man_luck

Answer 4

您可以使用JavaScript捕获表单提交事件，并在允许其通过之前验证/检查值。

$('form').submit(function () {
  if($('#blah').val() == "") {
    alert('blahblah');
    return false;
  }
});

- jdu