html5 验证失败时发出警报答案

【问题标题】：Alert when html5 validation failshtml5 验证失败时发出警报
【发布时间】：2015-07-16 13:54:59
【问题描述】：

所以我需要的只是当我的 html5 验证失败时出现的警报，例如：

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

是否有某种事件可用于使用 JavaScript 或 jQuery 显示此警报？

这似乎很基本，但我在网上找不到任何关于它的信息。我能找到的只是更改直接显示在字段上的弹出消息的方法。

我需要这个，因为我的表单跨越多个选项卡，因此根据用户提交表单时的位置，显示错误消息的气泡可能并不总是出现。

【问题讨论】：

标签： javascript jquery html validation

【解决方案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/

【讨论】：

我会将$('input[required]').[...] 更改为$(':input[required]').[...]（注意:）以将文本区域包含在其中。 @pawel，请考虑编辑您的答案。

【解决方案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>

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

HTML5 表单验证过程仅限于以下情况：表单正在通过提交按钮提交。表单提交算法明确表示，当表单通过 submit() 方法提交。显然，这个想法是如果您通过 JavaScript 提交表单，您应该这样做验证

【讨论】：